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

Posted 2023-05-09

【中文标题】jQuery Mobile 停止对父级的点击传播

【英文标题】：jQuery Mobile stop taphold propagation to parent

【发布时间】：2019-03-08 21:53:23

【问题描述】：

我正在构建一个页面，我想在该页面中使用点击来启动 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，红色也会触发，这不是我想要的。

【参考方案1】：

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

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

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

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

【讨论】：

这看起来很有前途，就像在谷歌浏览器上模拟移动设备的魅力一样，但是当我在实际的移动设备上尝试这个时，默认的“右键单击”（您可以在其中打开新的标签、稍后阅读等）会在 Chrome 中弹出。有没有办法禁用默认的浏览器上下文菜单？

Mobile device OS-Versions hell... 至于右键你可以使用oncontextmenu="return false;"- 但对于默认设备taphold我相信你可以试试这个：touch-callout equivalent。让我知道...