平移时jquery和hammer.js幽灵点击答案

【问题标题】：jquery and hammer.js ghost click when panning平移时jquery和hammer.js幽灵点击
【发布时间】：2015-08-19 19:11:56
【问题描述】：

我正在使用 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 但在我完成平移后仍然无法让它停止触发点击。

【问题讨论】：

标签： javascript jquery cordova jquery-mobile hammer.js

【解决方案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');
});

【讨论】：

【解决方案2】：

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

例如，您可以添加类和样式

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

panstart 时，panend 时删除。

希望这个技巧对其他人有所帮助。

【讨论】：

【解决方案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'});
    });

    ...

【讨论】：