jQuery Mobile 1.3.1 taphold事件被多次激活

Question

我将taphold事件绑定到表的td元素，但是当我点击并按住以触发事件时，它会以某种方式被多次触发。我的示例代码：

$("td").on("taphold", function(){
    alert("taphold fired!");
});

如果我按住水龙头，我会同时收到至少6条提醒信息。 如何举行活动只是举行一次？ 我在带有safari和chrome浏览器的Ipad上测试了代码

Answer 1

简介

jQuery Mobile 的工作方式与经典网络应用程序不同。根据您每次访问提到的页面时设置绑定事件的方式，它将反复绑定事件。这不是错误，只是 jQuery Mobile 处理其网页的方式。

您的问题有几种解决方案。每种解决方案都有上行和下行。

解决方案1 ​​

最佳解决方案是使用 pageinit 绑定事件。如果您查看官方文档，您会发现 pageinit 会触发 ONLY 一次，就像文档就绪一样，所以事件不会发生再次束缚。这是最好的解决方案，因为您没有像使用off方法删除事件时那样的处理开销。

使用 jsFiddle 示例：http://jsfiddle.net/Gajotres/AAFH8/

解决方案2

在绑定事件之前删除事件：

$('#index').on('pagebeforeshow',function(e,data){    
    $(document).off('click', '#test-button').on('click', '#test-button', function(e) {
        alert('Button click');
    });    
});

使用 jsFiddle 示例：http://jsfiddle.net/Gajotres/K8YmG/

解决方案3

使用 jQuery Filter 选择器，如下所示：

$('#carousel div:Event(!click)').each(function(){
    //If click is not bind to #carousel div do something
});

由于事件过滤器不是官方 jQuery 框架的一部分，因此可以在此处找到：http://www.codenothing.com/archives/2009/event-filter/

简而言之，如果速度是您的主要关注点，那么 Solution 3 要好于 Solution 2.

解决方案4

一个新的，可能是最简单的。

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).on('click', '#test-button',function(e) {
        if(e.handled !== true) // This will prevent event triggering more then once
        {
            alert('Clicked');
            e.handled = true;
        }
    }); 
});

使用 jsFiddle 示例：http://jsfiddle.net/Gajotres/Yerv9/

最后的注释

如果您想了解有关页面事件的详细信息，它们如何工作以及如何使用它们来防止多个事件绑定，请查看此 ARTICLE ，以使其透明是我个人的博客。或者也可以找到 HERE 。

Answer 2

尝试使用off：

$("td").off("taphold");
$("td").on("taphold", function(){alert("taphold fired!");});

您需要确保一次只有一个事件处理程序。这也会触发许多taphold事件。