Запретить сенсорное перемещение по умолчанию для родителей, но не для детей - PullRequest
Новая
       7

Запретить сенсорное перемещение по умолчанию для родителей, но не для детей

24 голосов
/ 28 февраля 2012

Я создаю небольшое веб-приложение для iPad, и у меня есть несколько элементов, которые я запрещаю пользователю прокручивать, предотвращая использование по умолчанию события touchmove.Однако у меня есть ситуация, когда мне нужно, чтобы пользователь мог прокручивать дочерний элемент.

Я пытался использовать e.stopPropagation ();но не повезло!Я также попытался обнаружить элемент под пальцем и поместил e.preventDefault ();внутри оператора if, но опять же, не повезло.Или, может быть, я просто запутался ...

Есть идеи?Удаление div .scroll из #fix div - это последнее средство на самом деле, поскольку оно вызовет все виды головных болей.

EDIT

Мне удалось отсортироватьЭто.Похоже, я не понял использование .stopPropagation ();упс!

Рабочий код: 

<div id="fix">

    <h1>Hi there</h1>

    <div class="scroll">
        <ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
    </div>

    <div class="scroll">
        <ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
    </div>

</div>

И Javascript: 

$('body').delegate('#fix','touchmove',function(e){

    e.preventDefault();

}).delegate('.scroll','touchmove',function(e){

    e.stopPropagation();

});

Ответы [ 5 ]

18 голосов
/ 28 февраля 2012

Попробуйте это: 

$('#fix').on('touchmove',function(e){
    if(!$('.scroll').has($(e.target)).length)
        e.preventDefault();
});

EDITED

e.target содержит конечный целевой узел события касания.Вы можете остановить все события, которые не «перепрыгивают» через ваши div .scroll.

Я думаю, что есть лучшие решения, но это должно быть в порядке.

10 голосов
/ 19 сентября 2013 
document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
document.getElementById('inner-scroll').addEventListener('touchmove', function(e){e.stopPropagation()}, false);

Идея состоит в том, что ваша основная прокрутка всегда (на ваше усмотрение) отключена, но в вашей внутренней прокрутке вы предотвращаете всплытие (или распространение) события, поэтому оно никогда не достигнет первого прослушивателя событий,что в конечном итоге отменит событие TouchMove.

Я надеюсь, что это то, что вы искали.У меня была ситуация, похожая на вашу, когда на планшете была отключена основная прокрутка, но я хотел, чтобы работала внутренняя прокрутка.Это, казалось, сделало работу.

8 голосов
/ 23 января 2013

Это должно работать: 

$(document).on('touchmove', function(e) {
    if (!$(e.target).parents('.scroll')[0]) {
        e.preventDefault();
    }
});
2 голосов
/ 20 сентября 2012

Я нашел интересное обсуждение здесь: https://github.com/joelambert/ScrollFix/issues/2, и есть хорошее решение от bjrn

По сути, оно использует преимущества гибких коробок.У меня хорошо сработало на ipad.Вот тестовая ссылка, которую он установил и которая показывает его на работе: http://rixman.net/demo/scroll/

Что особенно приятно в этом решении, это то, что он полностью CSS и не требует JavaScript.

1 голос
/ 24 апреля 2013

Я нашел другое решение, используя css-классы и document.ontouchmove. Я разрабатываю IPad Webapp со слайдерами и хотел предотвратить отскок всех других элементов, когда происходит событие сенсорного перемещения. Это мое решение в виде резюме:

HTML: 

<body>
  <div id="outterFrame" class="fullscreen"> <!-- class fullscreen is self-explaining I guess -->
      <div id="touchmove_enabled class="enable_touchmove sliderbutton">Button</div>
  </div>
</body>

Javascript: 

/* preventDefault on touchmove events per default */
document.ontouchmove = function(event)
{
   var sourceElement = event.target || event.srcElement;
   if(!hasClass(sourceElement,"enable_touchmove"))
{
   e.preventDefault();
}
};

/* helper method "hasClass" */
function hasClass(element,class)
{
if(element.className != null)
{
    return element.className.match(new RegExp('(\\s|^)'+class+'(\\s|$)'));
}
return false;
}

Теперь вызывается только событие touchmove для div "touchmove_enabled".

Возможно, мое решение кому-нибудь пригодится. Patric

...