Question

如何为多个事件类型仅触发事件处理程序一次？

$("p").on("click touchend", function(e) {
    console.log( "<p> was clicked" );
});

在某些设备上调用此处理程序两次 - 首先是“touchend”事件（或者例如“touchstart” - 在这种情况下无关紧要），然后再次为“click”事件自动触发此处理程序。

它的工作方式与"click" && "touchend"类似，但我希望它的行为类似于"click" || "touchend"。是否有一种简单的方法在触发“触摸（开始/结束）”时阻止调用“click”处理程序，反之亦然？我想出的唯一解决方案是，如果e.type是“touchend”，则取消绑定“点击”事件。

我发现.on("click touchend")仅适用于集合中的一个事件的信息，但我已经检查过它被解雇了两次，至少在少数移动设备上，所以你有一个更好的解决方案吗？< / p>

Answer 1

我不确定要回答，但你可以确定event对

var clickEvent = ((document.ontouchend===null)?'click':'touchend');
$("p").on(clickEvent, function(e) {
   console.log( "<p> was "+e );
});

Answer 2

这取决于你如何加载你的jQuery。试试这个：

$(document).ready(function(){

    $("p").on("click touchend", function(e) {
         if(e.type == "click"){
              console.log( "<p> was clicked" );
         } else if(e.type == "touchend"){
              console.log( "<p> was touched" );
         }
    });

});

Answer 3

由于这些事件总是按顺序排列，首先触摸触摸设备，然后单击，您可以检查它是否是触摸设备，然后仅绑定到touchend，如果它不是绑定点击。

然而，当用户开始触摸其他地方时，绑定到仅触摸结束是一个问题，拖动并结束按钮（想想滚动）。

我的猜测是你正在使用它来获得更快的点击，没有移动设备300毫秒的延迟，尝试这个库FastClick，它将同时监听触摸开始和触摸结束，并立即调用点击处理程序等，然后你可以绑定只点击所有设备。

Answer 4

您正在寻找event.stopImmediatePropagation()

保持其余的处理程序不被执行并阻止冒泡DOM树的事件。

$(document).ready(function() {
    $("p").on("click touchend", function(e) {
        e.stopImmediatePropagation()
    console.log( "<p> was clicked" );
});
});

小提琴：http://jsfiddle.net/7w0s43f7/

处理多个事件但仅针对一个事件执行fire handler

4 个答案: