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

Posted 2023-03-31

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

【英文标题】：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