Question

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

我有一个互动，点击，我隐藏被点击的内容（可能是父母），并在其位置显示一些其他内容（更改屏幕 - 像功能）。

问题在于新近可见的内容可能在它们上具有自己绑定的事件，或者可以在点击时本地交互（例如标签切换复选框，文本输入被聚焦）。如果在点击发生时隐藏/显示组件，则400ms点击事件仍在运行，然后在下面的元素上触发。

在手机上查看这个jsfiddle：

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>

查看点击方式，切换下面的标签（仅限移动！）。这不会发生在网络上，这是因为在标签上触发了原生点击事件，因为它在touchstart事件的400毫秒内在点击位置可见。

还尝试将标签上的点击事件更改为native click event。这也被错误地触发（仅限移动！）。

其他情况我注意到这种情况发生在点击事件以外，而标签是输入字段，文本输入字段在点击事件后面显示时会立即聚焦（并弹出键盘）。

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

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

Answer 1

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

~~解决方案1 ~~

clickbuster.js，阻止对touchend事件后给定时间范围内同一位置发生的点击事件的默认和停止传播。这似乎非常适合防止绑定点击事件和防止标签切换复选框。但是，它并不能阻止输入被聚焦。适用于Hammer v1和v2。只是嵌入脚本，它处理所有其余的。

解决方案2

e.gesture.srcEvent.preventDefault()

阻止对原生touchstart事件的默认。这似乎更加万无一失，也适用于输入焦点问题。仅适用于锤子v2。需要在所有.on（＆＃39; tap＆＃39;）内部调用

Hammer.js点击触发点击动作后点击后面的DOM元素

1 个答案: