jQuery Mobile 停止对父级的点击传播

Question

我正在构建一个页面，我想在该页面中使用点击来启动 contextMenu。但是，当一个元素在父元素中时，taphold 会传播到该父元素。我想防止这种情况发生。

所以当用户握住孩子时，只有孩子的轻触功能应该启动，当用户持有父母时，只有父母应该启动。

我尝试了 el.stopPropagation() 和 el.stopImmediatePropagation()，但都没有阻止 taphold 传播到父级。

This fiddle 将显示问题。握住绿色孩子也会触发红色父母的轻拍

小提琴显示两个 div：

<div class='parent'>
   <div class='child'></div>
</div>

并使用此代码：

$('.parent').on('taphold', function( el ){
   alert( 'parent' );
});

$('.child').on('taphold', function( el ){
   alert( 'child' );
});

如果你点击并按住绿色 div，红色也会触发，这不是我想要的。

Answer 1

嗯，taphold 不像其他事件那么容易，因为要识别它，需要启动一个timer，它应该检查从初始屏幕压力（ JQM 使用自己的vmousedown 事件）。因此，在 tapholdThreshold 过去之后（通常是 750 毫秒），框架可以引发 taphold 事件。

我相信得到完美的解决方案你可能需要修补JQM，否则这里有一个快速的解决方法：

$('.parent').on('taphold', function( e ) {
    if(e.target == e.currentTarget) {
        // do the action
    }
});

taphold 无论如何都会被提升，但您可以捕获原点并跳过您的代码的执行。