jQuery Mobile 1.3.1 taphold 事件多次触发

Question

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

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

如果我按住水龙头，我会立即收到至少 6 条警报消息。如何让事件在举行时只触发一次？我在 Ipad 上使用 safari 和 chrome 浏览器测试了代码

Answer 1

简介

jQuery Mobile 的工作方式与经典 Web 应用程序不同。根据您每次访问上述页面时绑定(bind)事件的方式，它将一遍又一遍地绑定(bind)事件。这不是一个错误，这只是 jQuery Mobile 处理其页面的方式。

您的问题有多种解决方案。每个解决方案都有优点和缺点。

解决方案1

最好的解决方案是使用pageinit来绑定(bind)事件。如果你看一下官方文档你会发现pageinit只会触发ONLY一次，就像文档准备好了一样，所以没办法事件将再次绑定(bind)。这是最好的解决方案，因为您没有像使用 off 方法删除事件时那样的处理开销。

工作jsFiddle示例:http://jsfiddle.net/Gajotres/AAFH8/

解决方案2

在绑定(bind)事件之前将其删除:

$('#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/

简而言之，如果速度是您最关心的问题，那么解决方案 3 比解决方案 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/

最后说明

如果您想了解有关页面事件的更多信息、它们如何工作以及如何使用它们来防止多个事件绑定(bind)，请查看此 ARTICLE ，坦白说，这是我的个人博客。或者也可以查HERE 。