如何在移动浏览器上禁止长按会出现的文本操作菜单

Posted 2023-05-01

参考技术A 这个是手机自身的设置，跟浏览器关系不是很大呀，你在其他的应用里，长按都会有保存选项弹出的。你要是想对你的网页进行测试，用手机QQ浏览器就很不错，他的网页打开速度快，你可以很快速的看到你的结果，而且不会因为自身问题出现报错之类的现...2455

如何彻底去除手机浏览器长按震动？

【中文标题】如何彻底去除手机浏览器长按震动？

【英文标题】：How to completely remove mobile browser long-press vibration?

【发布时间】：2017-09-07 04:22:47

【问题描述】：

我正在尝试完全消除在移动浏览器中长按某个元素时发生的振动。

具体来说，我有一个图像，我正在向其中添加我自己的长按功能，但默认情况下发生的细微短振动会产生干扰，我需要禁用它。

我已经成功地阻止了通常的上下文菜单的出现，方法如下：

window.oncontextmenu = function (event) 
  event.preventDefault();
  event.stopPropagation();
  return false;
;

我还添加了 CSS 来停止突出显示和文本选择等 - 但我无法弄清楚是什么导致了几百毫秒后的默认振动。

是否有另一个生命周期事件在移动浏览器中长按时弹出，在 oncontextmenu 内部或周围？

这里是完整的 plunker 示例，长按移动浏览器中的图像（我在 Android 上使用 chrome）以了解我的意思：https://plnkr.co/edit/y1KVPltTzEhQeMWGMa1F?p=preview

【问题讨论】：

在 Firefox 中更糟糕。 Firefox for Android 不再振动，而是取消了触摸点（触发 touchcancel）！

【参考方案1】：

点击时禁用文本选择。

document.querySelector("#your_target").addEventListener("touchstart", (e) =>

    e.preventDefault();
    e.stopPropagation();
    this.style.userSelect = "none";
);

document.querySelector("#your_target").addEventListener("touchend", (e) =>

    e.preventDefault();
    e.stopPropagation();
    this.style.userSelect = "default";
);

【讨论】：

太棒了，效果很好，谢谢！！

【参考方案2】：

您可以在 CSS 中使用 touch-action: none;。然后你也许可以处理一个交互事件来做你想做的事。

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action