滑动和点击事件同时触发 - Hammer.js答案

【问题标题】：Swipe and click events firing at the same time - Hammer.js滑动和点击事件同时触发 - Hammer.js
【发布时间】：2017-05-18 18:59:59
【问题描述】：

我试图允许在父元素上滑动并单击子元素。目前，当我只想触发滑动时，滑动和点击就会触发。

HTML

<div id="slider">
  <div class="broadcast__message__list__item">Try and swipe me</li>
</div>

var slider = document.getElementById("slider");
Hammer(slider).on("swipeleft", function() {
  console.log("swipe left");
});
Hammer(slider).on("swiperight", function() {
  console.log("swipe right");
});

$(document).on("click", ".broadcast__message__list__item", function(e) {
  console.log("click");
});

CODEPEN

【问题讨论】：

标签： javascript jquery hammer.js

【解决方案1】：

我找到了修复它的方法，但它很笨拙，我无法在实践中使用它。

var slider = document.getElementById("slider");
var lastSwipe = 0;
Hammer(slider).on("swipeleft", function() {
  lastSwipe = new Date().getTime();
  console.log("swipe left");
});
Hammer(slider).on("swiperight", function() {
  lastSwipe = new Date().getTime();
  console.log("swipe right");
});

$(document).on("click", ".broadcast__message__list__item", function(e) {
  var t = new Date().getTime() - lastSwipe;
  if(t > 100) {
    console.log(t + " click");
  }
});

【讨论】：

【解决方案2】：

在滑动事件中添加 e.defaultPrevented

Hammer(slider).on("swipeleft", function(e) {
  if (e.defaultPrevented) return
  console.log("swipe left");
});

【讨论】：