禁用HTML元素右键菜单后如何消除移动端长按振动反馈？

方案1：区分事件触发源，仅阻止桌面端右键菜单 #

在contextmenu事件回调中，判断事件是否由触摸操作触发，仅在非触摸场景下阻止默认行为，避免移动端触发振动反馈：

function disableRightClick(e) {
  // 仅阻止非触摸设备的右键菜单（桌面端）
  if (!e.touches?.length && e.pointerType !== 'touch') {
    e.preventDefault();
  }
}

elem.addEventListener("contextmenu", disableRightClick);

这样移动端长按仍会触发系统默认菜单，但不会产生振动；如果需要同时禁止移动端长按菜单，可结合方案2。

方案2：CSS禁止移动端长按菜单，配合JS阻止桌面右键 #

通过CSS属性禁止移动端长按弹出的系统菜单，从根源避免移动端触发contextmenu事件，再用JS拦截桌面端右键操作：

/* 禁用移动端长按菜单 */
elem {
  -webkit-touch-callout: none;
  touch-action: none;
  user-select: none;
}

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

elem.addEventListener("contextmenu", disableRightClick);

-webkit-touch-callout: none会阻止移动端长按弹出的默认菜单（如保存、复制），此时移动端长按不会触发contextmenu事件，自然不会执行preventDefault导致振动；桌面端右键菜单仍会被JS正常拦截。

方案3：主动取消触觉反馈（兼容有限） #

部分浏览器支持通过navigator.vibrate API主动停止振动，可在回调中补充该逻辑：

function disableRightClick(e) {
  e.preventDefault();
  // 尝试取消振动反馈
  if (navigator.vibrate) {
    navigator.vibrate(0);
  }
}

elem.addEventListener("contextmenu", disableRightClick);

注意：该方案兼容性有限，仅部分移动端浏览器支持，优先推荐前两种方案。

内容的提问来源于stack exchange，提问作者Ryan Peschel