jquery 和 hammer.js 平移时重击

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 事件被触发。

我尝试了 stopPropagation 和 stopImmediatePropagation，但在我完成平移后仍然无法让它停止触发点击。

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

另一种避免重击的方法是在锤子目标上创建伪class。

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

的样式

`.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 平移时重击

jquery and hammer.js ghost click when panning

javascript

jquery

jquery-mobile

cordova

hammer.js