Обработка нескольких событий, но пожарный обработчик только для одного события

Question

Как запустить обработчик событий только один раз для нескольких типов событий?

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

Этот обработчик вызывается на некоторых устройствах дважды - во-первых, для «touchend» событие (или «touchstart», например, - это не имеет значения в данном случае), а затем этот обработчик автоматически запускается снова " щелчок ".

Это работает как "click" && "touchend", но я хочу, чтобы он действовал как "click" || "touchend". Есть ли простой способ для предотвратить вызов обработчика для «щелчка» при срабатывании «touch (start/end)» и наоборот? Единственное решение, которое я выяснил, - это отвязать событие «щелчок», если e.type был «косвенным».

Я нашел информацию, что .on("click touchend") должен работать только для одного события в коллекции, но я проверил, что он запускается дважды, по крайней мере, на нескольких мобильных устройствах, поэтому у вас есть лучшее решение для этого случая?

Answer 1

Это зависит от того, как вы загружаете 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 2

Поскольку эти события всегда приходят в порядке, первые touchend в сенсорных устройствах, а затем нажмите кнопку, вы можете проверить, если это устройство сенсорного и затем связать только touchend, и если это не связывает щелчок.

Однако привязка только к касанию - это проблема, когда пользователь начинает касаться где-то еще, перетаскивает и заканчивает на вашей кнопке (думаю, прокрутка).

Я предполагаю, что вы используете это для более быстрых кликов, без задержки на мобильных телефонах за 300 мс, попробуйте эту библиотеку FastClick, которая будет слушать как сенсорный старт, так и сенсорный конец и сразу вызовет обработчик кликов и т. Д., А затем вы сможете связать чтобы щелкнуть только по всем устройствам.

Answer 3

я не был, что обязательно ответить, но вы можете определить event право

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

Answer 4

Вы ищете event.stopImmediatePropagation()

держит остальную часть обработчиков от выполняется и предотвращает событие от барботажа дерева DOM.

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

Fiddle: http://jsfiddle.net/7w0s43f7/