javascript - Hammer.js 单击在点击操作后点击后面的 DOM 元素上触发

Question

我使用 Hammer.js 来检测移动设备上的触摸、点击、滑动等。

我有一个交互，在点击时，我隐藏点击的内容(可能还有 parent )并在其位置显示一些其他内容(更改屏幕 - 类似功能)。

问题是新出现的内容可能绑定(bind)了自己的事件，或者可能会在点击时进行本地交互(例如标签切换复选框、文本输入被聚焦)。如果组件在点击时立即隐藏/显示，则 400 毫秒的点击事件仍在运行，然后在下面的元素上触发。

在移动设备上查看这个 jsfiddle:

http://jsfiddle.net/annam/xGJZL/

http://jsfiddle.net/annam/xGJZL/embedded/result/

<div class="checkbox">
    <input type="checkbox" id="check" />
    <label for="check"></label>
</div>
<div class="box"></div>

<style>
.checkbox { width: 500px; height: 500px; position: absolute; top: 0; ; left: 0;  }
.checkbox input { display: none; }
.checkbox label { display: block; width: 100%; height: 100%; background: yellow; }
.checkbox input:checked + label { background: green; }
.box { position: absolute; top: 0; left: 0; width: 200px; height: 200px; background: pink; }
</style>

<script>
$('.box').hammer().on('tap', function(e){ $(this).hide(); })
$('label').hammer().on('tap', function(e){ $('.box').show(); })
</script>

查看点击时如何切换下面的标签(仅限移动设备!)。这不会发生在 Web 上，它会发生是因为在标签上触发了 native 点击事件，因为它在 touchstart 事件的 400 毫秒内在点击位置上可见。

同时尝试将标签上的点击事件更改为 native click event .这也是错误触发的(仅限移动设备!)。

除了点击事件和标签是输入字段，我注意到其他情况也会发生这种情况，其中文本输入字段在点击事件后面显示后立即获得焦点(并弹出键盘)。

使用 preventDefault 和 stopPropagation 不能解决这个问题，因为它不是事件冒泡的问题，被阻止的事件实际上是“点击”，我们需要停止的是点击/鼠标按下/触摸范围内的事件.这似乎发生在 hammerjs v1 和 v2 上(带有 e.gesture.preventDefault() 等的 v1 也不起作用)。

有什么办法可以避免这种情况？

Answer 1

经过一些feedback from the creator of Hammer.js, Jorik ，这里有两个不同的解决方案:

解决方案一

<罢工> clickbuster.js ，它可以防止在 touchend 事件之后的给定时间范围内在同一位置发生的点击事件发生默认和停止传播。这似乎非常适合防止绑定(bind)点击事件和防止标签切换复选框。虽然不能防止输入被聚焦。适用于 Hammer v1 和 v2。只需嵌入脚本，它会处理所有其余的事情。

方案二

e.gesture.srcEvent.preventDefault()

这会阻止 native touchstart 事件的默认设置。这似乎更加万无一失，也适用于输入焦点问题。虽然只适用于 hammer v2。需要在所有 .on('tap') 绑定(bind)中调用