如何阻止非a标签元素移动端被长按触发「在新标签页打开」操作

方案1：纯CSS实现（最推荐，无侵入） #

直接给.button类添加以下样式即可，不会影响正常点击事件触发：

.button {
  /* 禁止长按选中元素内文字 */
  user-select: none;
  /* 禁止移动端长按呼出系统默认菜单（包含新标签页打开、复制等选项） */
  -webkit-touch-callout: none;
}

方案2：JS事件拦截（CSS不生效时备用） #

如果部分老旧移动端设备CSS方案不生效，可以给元素添加事件拦截逻辑：

<div
  class="button"
  @click="handleSubmit"
  <!-- 阻止右键/长按呼出上下文菜单 -->
  @contextmenu.prevent
  <!-- 仅拦截长按行为，不影响短按点击 -->
  @touchstart="(e) => {
    clearTimeout(window.touchTimer)
    window.touchTimer = setTimeout(() => {
      e.preventDefault()
    }, 500)
  }"
  @touchend="() => clearTimeout(window.touchTimer)"
>
  Click
</div>

额外排查点 #

如果修改后仍然出现该问题，可以检查元素外层是否包裹了<a>标签：

• 若是不必要的a标签直接移除即可
• 若必须保留a标签，给a标签添加href="javascript:void(0)"避免被浏览器识别为跳转链接。

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