我找到了关于堆栈溢出的另一个问题的代码,我使用了相同的代码,但它不起作用。我已经在使用safari和chrome的iphone和使用chrome的android设备上试用过了。找不到事件处理程序不工作的原因。
手势的目的是使用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;
}
};
https://stackoverflow.com/questions/47663237
复制