0
スタックオーバーフローに関する別の質問でコードが見つかりましたが、同じコードを使用しましたが動作しません。私はサファリとクロムを使ってiphoneで、またクロムを使ってアンドロイドデバイスで試してみました。なぜイベントハンドラが動作していないのかわかりません。javascript - スワイプジェスチャーが検出されない
ジェスチャーの目的は、rgb値を使用して背景色を変更することです。確認したい場合はデスクトップ版が動作し、andy.serra.usが起動します。そして今、私はモバイル版を構築しようとしています。
document.body.addEventListener('touchstart', handleTouchStart(event), false);
document.body.addEventListener('touchmove', handleTouchMove(event), false);
var xDown = null;
var yDown = null;
function handleTouchStart(event) {
if(screen && screen.width < 480 && !(document.getElementsByClassName('in')[0])) {
xDown = event.touches[0].clientX;
yDown = event.touches[0].clientY;
}
};
function handleTouchMove(event) {
if(screen && screen.width < 480 && !(document.getElementsByClassName('in')[0])) {
if (! xDown || ! yDown) {
return;
}
var xUp = event.touches[0].clientX;
var yUp = event.touches[0].clientY;
var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
if (Math.abs(xDiff) > Math.abs(yDiff)) {/*most significant*/
if (xDiff > 0) {
red -= increment;
if(red < 0) { red = 0; }
document.getElementById("val-display").innerHTML = "Red: " + red + "<br>Green: " + green + "<br>Blue: " + blue + "<br>Hex: #" + fullColorHex(red, green, blue);
} else {
blue -= increment;
if(blue < 0) { blue = 0; }
document.getElementById("val-display").innerHTML = "Red: " + red + "<br>Green: " + green + "<br>Blue: " + blue + "<br>Hex: #" + fullColorHex(red, green, blue);
}
} else {
if (yDiff > 0) {
green -= increment;
if(green < 0) { green = 0; }
document.getElementById("val-display").innerHTML = "Red: " + red + "<br>Green: " + green + "<br>Blue: " + blue + "<br>Hex: #" + fullColorHex(red, green, blue);
}
}
setBackgroundColor();
setTextColorFromBackground("title", false);
setTextColorFromBackground("side_box", true);
/* reset values */
xDown = null;
yDown = null;
}
};