Hammer.js 桌面点击和滑动冲突解决方案

前言

Hammer.js 是一个优秀的手势识别库，它可以帮助我们在 Web 开发中处理各种手势操作。但是，在桌面浏览器上，我们可能会遇到点击和滑动冲突的问题，即当我们在页面上滑动时，可能会因为滑动了太短的距离而触发了点击事件。这时，就需要一个解决方案。

解决方案

在 Hammer.js 2.0 以上版本中，我们可以使用 touchAction 属性来解决这个问题。touchAction 的值可以为以下几种：

• auto：浏览器默认行为，即既支持点击又支持滑动。
• none：禁用浏览器默认行为，即不支持滑动。
• pan-x：支持水平滑动。
• pan-y：支持垂直滑动。
• manipulation：自定义操作。

我们可以将 touchAction 赋值为 pan-y，这样就可以保留点击事件而禁止滑动事件了。示例代码如下：

var hammertime = new Hammer(myElement, {
  touchAction: 'pan-y'
});

其中，myElement 为要添加手势识别的元素。

总结

在桌面浏览器上使用 Hammer.js 处理手势操作时，可能会遇到点击和滑动冲突的问题。通过设置 touchAction 属性，可以解决这个问题。设置为 pan-y 即可保留点击事件而禁止滑动事件。