Question

我使用的是jQuery 191和Hammer JS 204.我有以下示例场景

<div> class="myDiv">
    <div class="content">
        <img>
    </div>
</div>

示例JS

$('.myDiv').hammer({}).bind("pan", function(h) {
    h.gesture.srcEvent.preventDefault();
});

$('.content img').on('click', function(){
    console.log('i was clicked');
});

当我点击图片开始平移myDiv时，在panend之后，myDiv img click事件被触发。

我试图阻止传播和停止传播，但在完成平移后仍然无法停止点击。

Answer 1

var hammering = false;

$('.myDiv').hammer({}).bind("pan", function(h) {
    h.gesture.srcEvent.preventDefault();
}).bind("panstart", function(h) {
    hammering = true;
}).bind("panend", function(h) {
    setTimeout(function(){
        hammering = false;
    }, 300);
});

$('.content img').on('click', function(){
    if(hammering) return false;
    console.log('i was clicked');
});

Answer 2

另一种避免鬼点击的方法是在锤子目标上创建一个伪类。

例如，您可以添加类和类似

的样式

`.block:after {
  content: " ";
  background: transparent;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  z-index: 2;
  display: block;
  position: absolute;
}`

panstart时，在panend时将其删除。

希望这个技巧能够帮助别人。

Answer 3

我发现了一种简单的方法可以防止Hammer.js平移时发生点击事件：

在平移开始时禁用div指针事件，然后在平移结束时启用它。

    ...

    myPanGesture.on("panstart", function(ev) {
        $(".tab-pane.active").css({'pointer-events':'none'});
    });

    ...

    myPanGesture.on("panend", function(ev) {
        $(".tab-pane.active").css({'pointer-events':'auto'});
    });

    ...

淘汰时jquery和hammer.js鬼点击

3 个答案: