javascript 滑动时禁用网页导航（后退和前进）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30636930/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable web page navigation on swipe(back and forward)
提问by Shekhar Joshi
On a Windows phone, in IE users can go back and forward by swiping on the screen if the swipe is coming from the edge. This OS level functionality is hampering my webpage's UX.
在 Windows 手机上，在 IE 中，如果滑动来自边缘，则用户可以通过在屏幕上滑动来前后移动。这个操作系统级别的功能阻碍了我网页的用户体验。
Is there any js or css which can disable that? Some hack would also do.
是否有任何 js 或 css 可以禁用它？一些黑客也可以。
A snapshot from windowsphone's website:
来自 windowsphone 网站的快照：
Here is the link to the reference page: http://www.windowsphone.com/en-in/how-to/wp8/basics/gestures-swipe-pan-and-stretch
这是参考页面的链接：http: //www.windowsphone.com/en-in/how-to/wp8/basics/gestures-swipe-pan-and-stretch
Please note that I still need touchaction enabled for horizontal scrolling.
请注意，我仍然需要为水平滚动启用触摸操作。
回答by clickbait
Copy and paste this JavaScript:
复制并粘贴此 JavaScript：
var xPos = null;
var yPos = null;
window.addEventListener( "touchmove", function ( event ) {
var touch = event.originalEvent.touches[ 0 ];
oldX = xPos;
oldY = yPos;
xPos = touch.pageX;
yPos = touch.pageY;
if ( oldX == null && oldY == null ) {
return false;
}
else {
if ( Math.abs( oldX-xPos ) > Math.abs( oldY-yPos ) ) {
event.preventDefault();
return false;
}
}
} );
If you want it minified, copy and paste this:
如果你想缩小它，复制并粘贴这个：
var xPos=null;var yPos=null;window.addEventListener("touchmove",function(event){var touch=event.originalEvent.touches[0];oldX=xPos;oldY=yPos;xPos=touch.pageX;yPos=touch.pageY;if(oldX==null && oldY==null){return false;}else{if(Math.abs(oldX-xPos)>Math.abs(oldY-yPos)){event.preventDefault();return false;}}});
var xPos=null;var yPos=null;window.addEventListener("touchmove",function(event){var touch=event.originalEvent.touches[0];oldX=xPos;oldY=yPos;xPos=touch.pageX;yPos=touch.pageY;if(oldX==null && oldY==null){return false;}else{if(Math.abs(oldX-xPos)>Math.abs(oldY-yPos)){event.preventDefault();return false;}}});
回答by clovola
How about preventing the default action of the swipe event. Somewhere in your document.ready add (note I've included the document.ready in this example, only the function needs to be added):
如何防止滑动事件的默认操作。在你的 document.ready 的某处添加（注意我在这个例子中包含了 document.ready，只需要添加函数）：
$(document).ready(function(){
$(window).on('touchmove',function(e){e.preventDefault();});
});
$(document).ready(function(){
$(window).on('touchmove',function(e){e.preventDefault();});
});
In this case I believe the event is called 'touchmove'you may need to extend this to also ignore default behavior of touchstart/touchend but I'm not 100% sure.
在这种情况下，我相信该事件称为“touchmove”，您可能需要扩展它以忽略 touchstart/touchend 的默认行为，但我不是 100% 确定。
回答by tommyTheHitMan
This is also a problem for Mac users who have configured swipe-left to navigate backwards. You can't disable this setting, but you can prompt the user to confirm that they intended to navigate away https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload.
对于配置向左滑动向后导航的 Mac 用户来说，这也是一个问题。您无法禁用此设置，但您可以提示用户确认他们打算离开https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload。
回答by Jordan Nakamoto
Check out this Codepenby David Hill.
看看David Hill 的这个 Codepen。
var elem = document.getElementById("container"); //area we don't want touch drag
var defaultPrevent=function(e){e.preventDefault();}
elem.addEventListener("touchstart", defaultPrevent);
elem.addEventListener("touchmove" , defaultPrevent);
I actually think this is a cool way to build objects too.
我实际上认为这也是构建对象的一种很酷的方式。
回答by mayur kukadiya
You Should Try this solution in two way :
您应该以两种方式尝试此解决方案：
1) CSS only fix for Chrome/Firefox
1) CSS 仅适用于 Chrome/Firefox
html, body {
overscroll-behavior-x: none;
}
2) JavaScript fix for Safari
2) Safari 的 JavaScript 修复
if (window.safari) {
history.pushState(null, null, location.href);
window.onpopstate = function(event) {
history.go(1);
};
}
Over time, Safari will implement overscroll-behavior-xand we'll be able to remove the JS hack
随着时间的推移，Safari 将实现overscroll-behavior-x，我们将能够删除 JS hack
Possible duplicate of iOS 7 - is there a way to disable the swipe back and forward functionality in Safari?
回答by Hemanth chalamalasetti
*{
-webkit-touch-callout: none;
}
The result is to completely deactivate any touch events
结果是完全停用任何触摸事件
