[英]Prevent page scroll on drag in IOS and Android
我正在开发一个html5画布游戏,但我不知道如何处理触摸事件。 当用户触摸屏幕并拖动时,浏览器将滚动页面。 我想阻止它,并触摸开始,并触摸结束位置。 可能吗?
提前致谢
您需要覆盖默认触摸行为以停止拖动页面的touchevents。 显然,如果您的页面大于可用区域,您将需要再次处理它们,但是当您正在制作游戏时,假设您正在进行100%/ 100%布局。
function preventBehavior(e) {
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, {passive: false});
编辑:这是关于触摸事件的W3C推荐 ,这对您来说可能很方便。
由于最近版本的Chrome中发生了重大更改,上述答案不再正确。 将触摸事件侦听器附加到文档或正文元素将导致事件侦听器以“被动”模式注册,这会导致调用preventDefault
被忽略。
有两种解决方案:
首选解决方案是使用CSS样式touch-action
来指定不应发生滚动(例如,值为“none”)
如果这不合适(例如,如果交互类型应该以在手势开始之前无法确定的方式动态改变)那么事件监听器必须使用第三个参数集注册到{ passive: false }
(你应该执行浏览器检测以确保首先支持此样式。
如果您不想使用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);
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/
以下解决方案在拖动时阻止滚动并且通常滚动正在工作(不拖动时)
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
绑定到相关元素
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.