停止jQuery Mobile滑动事件双重冒泡 [英] Stop jQuery Mobile swipe event double bubbling

问题描述

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

I have jQuery Mobile on iPad Safari and for some reason touch swipe events are firing twice.

过去一年中人们报告了与本周相同的问题但我无法找到解释如何在不修改jQuery Mobile的情况下解决双重事件的问题不想那样做。 jQuery论坛上的线程

People have reported the same problem over the past year as recently as this week but I cannot find an explanation for how to fix the double event without modifying jQuery Mobile and I do not want to do that. Thread on jQuery forums

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

The follwoing element bindings for the swipe handler all have the same incorrect double-event result where the alert is called twice for every one swipe.

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

推荐答案

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

event.stopImmediatePropagation() was the trick, which is different from stopPropagation(). Ensuring the jQuery on() method is called in document.ready seems to help. I was able to use any element selector to bind the events including using the swipeup and swipe down from 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!');
    });
});

这篇关于停止jQuery Mobile滑动事件双重冒泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！