如何徹底去除手機瀏覽器長按震動？

Question

賞金將在 4 天后到期。 回答這個問題有資格獲得+50聲望獎勵。 巴勃羅正在尋找規范的答案。

我正在嘗試完全消除在移動瀏覽器中長按某個元素時發生的振動。

具體來說，我有一個圖像，我正在向其中添加我自己的長按功能，但是默認情況下發生的微妙的短振動會產生干擾，我需要禁用它。

我通過如下覆蓋它成功地阻止了通常的上下文菜單的出現：

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

我還添加了 CSS 以停止突出顯示和文本選擇等 - 但我無法弄清楚是什么導致了幾百毫秒后的默認振動。

在移動瀏覽器中、oncontextmenu 中或周圍是否有另一個生命周期事件在長按時彈出？

完整的 plunker 示例，請從移動瀏覽器（我在 Android 上使用 chrome）長按圖像以了解我的意思： https ://plnkr.co/edit/y1KVPltTzEhQeMWGMa1F?p=preview

Answer 1

我使用自己的React App在最后一天左右經歷了同樣的問題，我已經完成了與你相同的步驟而沒有成功。 目前我有一個Android應用程序正在使用webView打開React Web應用程序，我發現的是：

我很確定你（我們）試圖做的事情不能僅僅通過ReactJS完成，我使用的解決方案，因為我通過Android應用程序加載我的ReactJS應用程序是添加方法：

android:hapticFeedbackEnabled="false"

到我的AndroidManifest.xml文件（這里的文檔： https ： //developer.android.com/reference/android/view/View#attr_android : hapticFeedbackEnabled ）

如果您想更多地了解原生Android解決方案，那么Android Cookbook的一部分專注於自定義觸覺反饋： http ： //androidcookbook.com/Recipe.seam？ recipeId = 1242

或者，可以通過React-Native獲得解決方案。 React Native有一個內置的振動模塊，配置文檔可在這里找到： https ： //facebook.github.io/react-native/docs/vibration

Answer 2

您可以使用touch-action: none; 在 CSS 中。 然后你就可以處理交互事件來做你想做的事。

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

Answer 3

單擊時禁用文本選擇。

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";
});