辨别由触摸动作引起的上下文菜单事件？

Posted 2023-03-04

【中文标题】辨别由触摸动作引起的上下文菜单事件？

【英文标题】：Discern contextmenu events which are result of touch action?

【发布时间】：2018-04-22 11:50:26

【问题描述】：

我有一个应用程序，其中可以拖放 SVG 元素内的元素（感谢 d3-drag 和 d3-zoom，请参阅 https://bl.ocks.org/mbostock/3127661b6f13f9316be745e77fdfb084 作为此类页面的示例），它也可以用于触摸 -启用的设备，但是长按后会弹出一个上下文菜单（至少在 IE11、Edge 和 Firefox 中）并且挡住了，因此我想阻止上下文菜单在这种情况下出现。

我通常可以通过处理contextmenu 事件并在事件对象上执行.preventDefault() 来禁止显示上下文菜单，但我想知道是否存在解决方案，其中上下文菜单被阻止在触摸案例中显示，并且它仍然会出现例如右键单击或在元素具有焦点时按下menu key。

起初我以为我可以查看事件对象的 .button 和 .buttons 属性，但似乎这些值是任意的 0 或 2 并且看起来可以以任意组合找到它在不同系统上的各种浏览器中进行测试时。

元素已经有touch-action: none。

是否有一些工作方法可以使上下文菜单不显示长按触摸的结果？

It looks like .preventDefault() on the relevant touch events wouldn't be an option.

【问题讨论】：

我认为您可以重新打开触摸操作并使用touchmove 和touchend 事件来确定是否打开上下文菜单。例如：在touchmove 上，您可以设置一个应该忽略长按的标志。然后在touchend 上，您可以关闭标志。在contextmenu 事件处理程序中只需检查标志。这有意义吗？

@Potter 听起来很有希望，但我必须详细尝试一下，例如是否不会有任何竞争条件，例如contextmenu事件是否真的只有在所有浏览器和平台上的相关触摸事件之后才触发。我刚刚了解到，即使在鼠标情况下，也存在差异，在某些系统上按下鼠标右键会触发上下文菜单，而在其他系统上则是释放。

@Potter 另外，理论上我可能会与敞篷车用户打交道，因此会混淆，但我想这是一个不值得担心的极端情况。我开始认为，也许只是阻止所有contextmenu 事件毕竟还不错，您的普通用户并没有太多使用它，如果那时只是在我想我可以再次允许它的链接上使用它。丢失的是功能，例如在 Edge 中，您可以右键单击 SVG（甚至是动态生成的）并下载它，但在我的情况下，它无论如何都坏了（因为 CSS 和 ext.refs）。

【参考方案1】：

jQuery UI Touch Punch 解决了所有问题。

这是对 jQuery UI 的触控事件支持。基本上，它只是将触摸事件连接回 jQuery UI。在 iPad、iPhone、android 和其他支持触控的移动设备上进行了测试。我使用了可排序的 jQuery UI，它就像一个魅力。

http://touchpunch.furf.com/

【讨论】：

在我的情况下，d3 已经为我完成了所有的触摸事件处理，所以我不想要另一个库。我正在寻找一个低级的解决方案。

如果它适用于bl.ocks.org/mbostock/3127661b6f13f9316be745e77fdfb084（在所有浏览器/操作系统组合中），那么它可能也适用于我的应用程序。