javascript - JavaScript 防止在 body 元素上触摸移动，在其他元素上启用

Question

但很简单，我想阻止 body 元素上的 touchmove 事件，但为另一个元素启用它。我可以很好地禁用...但我不确定如何在其他地方重新启用它！

我想下面的理论上是有效的，因为return true它是相反的preventDefault，但它对我不起作用。可能是因为$altNav元素在 $bod？

JS：

$bod.bind('touchmove', function(event){

    event.preventDefault();
});
$altNav.bind('touchmove', function(event){

    return true;
});

Answer 1

我不确定你实际使用的是什么库，但我会假设 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
});

那应该照顾一切。此处的回调处理所有touchmove 事件，并在preventDefault每次在除$altNav.

在 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);

现在，如果$altNav是具有特定 id 的元素，只需将其替换为等等......祝target.className.match()你 好运，希望这会有所帮助target.id === 'altNav'

Answer 2

使用自定义 CSS 类并在文档处理程序中对其进行测试，例如：

<div>
    This div and its parents cannot be scrolled.
    <div class="touch-moveable">
        This div and its children can.
    </div>
</div>

然后：

jQuery( document ).on( 'touchmove', function( ev )
{
    if (!jQuery( ev.target ).parents().hasClass( 'touch-moveable' ))
    {
         ev.preventDefault();
    }
});

http://tinyurl.com/mo6vwrq

Answer 3

你可以添加一个参数，像这样

$bod.bind('touchmove', function(event,enable){
   if(enable){
       event.preventDefault();
   }

});