处理多个事件，但仅针对一个事件触发处理程序

Question

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

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

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

它像"click" && "touchend" 一样工作，但我希望它像"click" || "touchend" 一样工作。 是否有一种简单的方法可以在触发“touch(start/end)”时调用“click”处理程序，反之亦然？我想出的唯一解决方案是如果e.type 是“touchend”，则取消绑定“click”事件。

我发现.on("click touchend") 应该只适用于集合中的一个事件，但我检查过它被触发了两次，至少在少数移动设备上，所以你有更好的解决方案来解决这个问题？

Answer 1

我没那么肯定回答，但你可以确定event 对

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

Answer 2

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

但是，当用户开始触摸其他地方、拖动并最终到达您的按钮（想想滚动）时，绑定到仅触摸结束是一个问题。

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

Answer 3

这取决于您如何加载 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 4

您正在寻找event.stopImmediatePropagation()

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

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

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