JavaScript 防止在 body 元素上触摸移动，在其他元素上启用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13984788/
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
JavaScript prevent touch move on body element, enable on other elements
提问by technopeasant
but very simply, I'd like to prevent the touchmove event on the body element but leave it enabled for another element. I can disable fine... but I'm not sure how to re-enable it somewhere else!
但很简单，我想阻止 body 元素上的 touchmove 事件，但让它为另一个元素启用。我可以很好地禁用...但我不确定如何在其他地方重新启用它！
I imagine that the below theoretically works because return trueis the opposite of preventDefault, but it doesn't work for me. Might be 'cause $altNavelement is in$bod?
我想下面的理论上有效，因为return true与 相反preventDefault，但它对我不起作用。可能是因为$altNav元素在$bod？
JS:
JS：
$bod.bind('touchmove', function(event){
event.preventDefault();
});
$altNav.bind('touchmove', function(event){
return true;
});
回答by Elias Van Ootegem
I'm not sure what lib you're actually using, but I'll asume jQuery (I'll also post the same code in browser-native-js if you're using something other than jQ)
我不确定您实际使用的是什么库，但我会假设 jQuery（如果您使用的不是 jQ，我也会在 browser-native-js 中发布相同的代码）
$bod.delegate('*', 'touchstart',function(e)
{
if ($(this) !== $altNav)
{
e.preventDefault();
//and /or
return false;
}
//current event target is $altNav, handle accordingly
});
That should take care of everything. The callback here deals with alltouchmove events, and invokes the preventDefaultmethod every time the event was triggered on an element otherthan $altNav.
那应该照顾一切。这里的回调与涉及所有touchmove事件，并调用preventDefault每次事件的元素上触发时间的方法等相比$altNav。
In std browser-js, this code looks something like:
在 std browser-js 中，此代码类似于：
document.body.addEventListener('touchmove',function(e)
{
e = e || window.event;
var target = e.target || e.srcElement;
//in case $altNav is a class:
if (!target.className.match(/\baltNav\b/))
{
e.returnValue = false;
e.cancelBubble = true;
if (e.preventDefault)
{
e.preventDefault();
e.stopPropagation();
}
return false;//or return e, doesn't matter
}
//target is a reference to an $altNav element here, e is the event object, go mad
},false);
Now, if $altNavis an element with a particular id, just replace the target.className.match()thing with target.id === 'altNav'and so on...
Good luck, hope this helps
现在，如果$altNav是与特定ID的元素，只需更换target.className.match()用的东西target.id === 'altNav'等等...
祝你好运，希望这有助于
回答by glycoslave
Use a custom CSS class and test for it in the document handler, eg:
使用自定义 CSS 类并在文档处理程序中对其进行测试，例如：
<div>
This div and its parents cannot be scrolled.
<div class="touch-moveable">
This div and its children can.
</div>
</div>
then:
然后：
jQuery( document ).on( 'touchmove', function( ev )
{
if (!jQuery( ev.target ).parents().hasClass( 'touch-moveable' ))
{
ev.preventDefault();
}
});
回答by rachardking
you can add a argument,like this
你可以添加一个参数，像这样
$bod.bind('touchmove', function(event,enable){
if(enable){
event.preventDefault();
}
});
