禁用 HTML 元素上的右键单击上下文菜单后防止点击振动？

Question

我有这段代码，可用于禁用右键单击元素后出现上下文菜单：

function disableRightClick(e) {
  e.preventDefault();
}

elem.addEventListener("contextmenu", disableRightClick);

这适用于桌面设备，但在移动设备上，在移动设备上点击并按住几百毫秒后，会导致不幸的触觉反馈轻微振动。

如何消除这种轻微的振动？我尝试将

user-select: none

添加到元素，

touch-action: none

等，但似乎没有任何效果。

如果我删除

disableRightClick

回调，点击时手机不再振动。我想我可以以某种方式检测它是否是桌面设备（屏幕宽度？），并且仅有条件地添加

disableRightClick

（因为移动设备显然不需要它，它只会导致这种烦人的振动），但这似乎是一个糟糕的解决方案

Answer 1

这个解决方案“有效”，但我更喜欢一个不需要特征检测的解决方案：

const isTouchDevice = 'ontouchstart' in window;

function maybeDisableRightClick(e) {
  if (!isTouchDevice) {
    e.preventDefault();
  }
}

elem.addEventListener("contextmenu", maybeDisableRightClick);