【问题标题】: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'});
            });
        
            ...
        

        【讨论】:

          猜你喜欢
          • 2023-01-15
          • 1970-01-01
          • 2011-08-20
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2018-06-16
          相关资源
          最近更新 更多