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

Question

如何针对多种事件类型仅触发一次事件处理程序？

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

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

它的工作方式类似于"click" && "touchend"但我希望它的作用类似于"click" || "touchend" "click" || "touchend" 。 有没有一种简单的方法可以防止在触发“触摸（开始/结束）”时调用处理程序以“点击”，反之亦然？ 我发现的唯一解决方案是，如果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

这取决于您如何加载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，如果不绑定click。

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

我的猜测是，您正在使用它来实现更快的点击，而不会在手机中延迟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/