防止在IOS和Android中拖动页面滚动

Question

我正在开发一个html5画布游戏,但我不知道如何处理触摸事件.当用户触摸屏幕并拖动时,浏览器将滚动页面.我想阻止它,并触摸开始,并触摸结束位置.可能吗？

提前致谢

Answer 1

您需要覆盖默认触摸行为以停止拖动页面的touchevents.显然,如果您的页面大于可用区域,您将需要再次处理它们,但是当您正在制作游戏时,假设您正在进行100%/ 100%布局.

function preventBehavior(e) {
    e.preventDefault(); 
};

document.addEventListener("touchmove", preventBehavior, {passive: false});

编辑:这是关于触摸事件的W3C推荐,这对您来说可能很方便.

Answer 2

由于最近版本的Chrome中所做的更改,以上答案不再正确.将触摸事件侦听器附加到文档或正文元素将导致事件侦听器以"被动"模式注册,这会导致调用preventDefault被忽略.

有两种解决方案:

• 首选解决方案是使用CSS样式touch-action指定不应发生滚动(例如,值为"none")

• 在不合适的情况下(例如,如果交互类型应该以在手势开始之前无法确定的方式动态更改),则必须使用第三个参数集注册事件侦听{ passive: false }器(您应该执行浏览器检测以确保但是,首先支持这种风格).

Answer 3

如果您不想使用jQuery mobile或任何其他库,那么您可以试试这个.

var startX, startY, endX, endY;
document.addEventListener("touchstart", function(e){
    startX = e.touches[0].pageX;
    startY = e.touches[0].pageY;

    e.preventDefault();//Stops the default behavior
}, false);

document.addEventListener("touchend", function(e){
    endX = e.touches[0].pageX;
    endY = e.touches[0].pageY;

    e.preventDefault();//Stops the default behavior
}, false);