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

Question

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

提前致谢

Answer 1

您需要覆盖默认的触摸行为以停止触摸事件拖动页面。显然，如果您的页面变得大于可用区域，您将需要再次处理它们，但当您制作游戏时，将假设您正在执行 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);

Answer 4

canvas.addEventListener('touchstart', function(e)
{
    alert(e.changedTouches[0].pageX + " " + e.changedTouches[0].pageY);
}
canvas.addEventListener('touchend', function(e)
{
    alert(e.changedTouches[0].pageX + " " + e.changedTouches[0].pageY);
}

这是一篇关于手机上的触摸和手势的好文章：

http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

Answer 5

以下解决方案在拖动时防止滚动并且同时正常滚动工作（不拖动时）

var scrollable = true;

var listener = function(e) {
    if (! scrollable) {
        e.preventDefault();
    }
}

document.addEventListener('touchmove', listener, { passive:false });


onDragstartHandler() {
  scrollable = false;
}

onDragendHandler(} {
  scrollable = true;
}

不要忘记将 onDragstartHandler 和 onDragendHandler 绑定到相关元素