JavaScript предотвращает сенсорное перемещение элемента тела, включает другие элементы

Question

Но очень просто, я хотел бы предотвратить событие touchmove для элемента body, но оставить его включенным для другого элемента. Я могу отключить нормально... но я не уверен, как включить его где-то еще!

Я полагаю, что ниже теоретически работает, потому что return true противоположность preventDefault, но это не работает для меня. Может быть потому что $altNav элемент находится в $bod?

JS:

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

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

    return true;
});

Answer 1

Я не уверен, какую библиотеку вы на самом деле используете, но я назову jQuery (я также опубликую тот же код в browser-native-js, если вы используете что-то отличное от jQ)

$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 элемент с определенным идентификатором, просто замените 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();
   }

});