Остановить событие jQuery Mobile, двойное всплытие - PullRequest
Новая
       21

Остановить событие jQuery Mobile, двойное всплытие

7 голосов
/ 19 марта 2012

У меня jQuery Mobile на iPad Safari, и по какой-то причине события касания пальцем запускаются дважды.

Люди сообщали о той же проблеме за последний год, что и на прошлой неделе, но я не могу найти объяснение того, как исправить двойное событие без изменения jQuery Mobile, и я не хочу этого делать. Тема на форумах jQuery

Все следующие привязки элементов для обработчика прокрутки имеют одинаковый неверный результат двойного события, когда предупреждение вызывается дважды для каждого пролистывания.

Как следует связывать события касания jQuery Mobile, чтобы избежать двойных пузырей? 

// Test 1: Binding directly to document with delegate()
$(document).delegate(document, 'swipeleft swiperight', function (event) {
    alert('You just ' + event.type + 'ed!');
});


// Test 2: Binding to document with on() handler recommended as of 1.7 with and without preventDefault
$(document).on('swipeleft',function(event, data){
    event.preventDefault();
    alert('You just ' + event.type + 'ed!');
});


// Test 3: Binding to body with on() with and without event.stopPropagation 
$('body').on('swipeleft',function(event, data){
   event.stopPropagation();
   alert('You just ' + event.type + 'ed!');
});


// Test 4: Binding to div by class
$('.container').on('swipeleft',function(event, data){
   event.stopPropagation();
   alert('You just ' + event.type + 'ed!');
});

Ответы [ 3 ]

11 голосов
/ 19 марта 2012

event.stopImmediatePropagation () был трюк, который отличается от stopPropagation ().Обеспечение вызова метода jQuery on () в документе. Кажется, уже помогло.Я смог использовать любой селектор элементов для привязки событий, в том числе с помощью прокрутки и проведите вниз от здесь 

$(document).ready(function(){    
    $(document).on('swipeleft swiperight swipedown swipeup',function(event, data){
        event.stopImmediatePropagation();
        console.log('(document).Stop prop: You just ' + event.type + 'ed!');
    });
});
3 голосов
/ 12 ноября 2012

Ну, одна и та же проблема с событием swipe была вызвана дважды. Обходной путь должен связать событие следующим образом: 

$(document).on('swipeleft', '#div_id',  function(event){
    //console.log("swipleft"+event);
    // code 
});
0 голосов
/ 13 июля 2012

это действительно помогло и в моем случае. Я пытался пролистывать страницы с помощью мобильного jquery, и события смахивания (слева и справа) запускались несколько раз. event.stopImmediatePropagation () это работает как шарм. Спасибо !!

вот мой код. 

<script type="text/javascript"> 
    $(document).bind( 'pageinit', function(event) { 
        $("div:jqmData(role='page')").live('swipeleft swiperight',function(event){
            if (event.type == 'swipeleft') { 
                var prev = $(this).prev("div:jqmData(role='page')");
                if(typeof(prev.data('url')) !='undefined') {
                    $.mobile.changePage(prev.data('url'), { transition: 'slide', reverse: false});
                    event.stopImmediatePropagation();
                }
            }
            if (event.type == 'swiperight') { 
                var next = $(this).next("div:jqmData(role='page')"); 
                if(typeof(next.data('url')) != 'undefined') {
                    $.mobile.changePage(next.data('url'), { transition: 'slide', reverse: false});
                    event.stopImmediatePropagation();
                }                   
            }           
        });
    }); 
    </script>

HTML - 

<div data-role="page" id="page1" data-url="#page1"> 
    <div data-role="content">
        <div>
        <h1> Page 1 </h1>
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p>View internal page called</p>    
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li>Swipe Right to view Page 2</li>
            </ul>
        </div>
    </div>
</div>
<div data-role="page" id="page2" data-url="#page2"> 
    <div data-role="content">
        <div>
        <h1> Page 2 </h1>
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p>View internal page called</p>    
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li>Swipe Right to view Page 3</li>
            </ul>
        </div>
    </div>
</div>
...