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

时间:2012-02-12 18:49:11

标签: javascript html5 canvas touch

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

提前致谢

5 个答案:

答案 0 :(得分:23)

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

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

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

编辑:这是W3C recommendation谈论触摸事件,这对您来说可能很方便。

答案 1 :(得分:11)

由于最近版本的Chrome中发生了重大更改,因此上述答案不再正确。将触摸事件侦听器附加到文档或正文元素将导致事件侦听器以“被动”模式注册,这会导致忽略对preventDefault的调用。

有两种解决方案:

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

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

答案 2 :(得分:10)

如果您不想使用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);

答案 3 :(得分:3)

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/

答案 4 :(得分:0)

以下解决方案可防止在拖动时滚动并同时正常滚动(不拖动时)正常工作

var scrollable = true;

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

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


onDragstartHandler() {
  scrollable = false;
}

onDragendHandler(} {
  scrollable = true;
}

不要忘记将onDragstartHandleronDragendHandler绑定到相关元素