Question

我在iPad Safari上安装了jQuery Mobile，由于某些原因，触摸滑动事件会触发两次。

过去一年中人们已经报告了与本周相同的问题，但我无法找到解释如何在不修改jQuery Mobile的情况下修复双重事件，我不想这样做。 Thread on jQuery forums

滑动处理程序的以下元素绑定都具有相同的错误双事件结果，其中每次滑动都会调用两次警报。

如何绑定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!');
});

Answer 1

event.stopImmediatePropagation()是技巧，与stopPropagation（）不同。确保在document.ready中调用jQuery on()方法似乎有所帮助。我能够使用任何元素选择器来绑定事件，包括使用swipeup并从here向下滑动

$(document).ready(function(){    
    $(document).on('swipeleft swiperight swipedown swipeup',function(event, data){
        event.stopImmediatePropagation();
        console.log('(document).Stop prop: You just ' + event.type + 'ed!');
    });
});

Answer 2

嗯，有两次调用滑动事件同样的问题。解决方法是以这种方式绑定事件：

$(document).on('swipeleft', '#div_id',  function(event){
    //console.log("swipleft"+event);
    // code 
});

Answer 3

它对我的情况也很有帮助。我试图用移动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>

停止jQuery Mobile滑动事件双冒泡

3 个答案: