如何禁用移动端浏览器文本选中时触发的默认辅助弹窗？

你提到的默认选中文本弹窗效果如下：

可通过CSS+JS组合的方式实现需求，具体操作如下：

• 第一步：CSS基础配置，禁用系统默认呼出菜单，同时保留文本可选中能力
  给需要自定义选中文本行为的区域添加如下样式：

.target-area {
  /* 禁用iOS端长按文本/链接弹出的默认系统菜单 */
  -webkit-touch-callout: none;
  /* 保留文本可选能力，请勿设置为none */
  user-select: text;
  -webkit-user-select: text;
}

• 第二步：JS监听事件，阻止默认行为并触发自定义bottom sheet

const targetArea = document.querySelector('.target-area')
// 阻止默认上下文菜单（含移动端长按菜单）弹出
targetArea.addEventListener('contextmenu', e => {
  e.preventDefault()
})

// 监听文本选中事件
document.addEventListener('selectionchange', () => {
  const selection = window.getSelection()
  const selectedText = selection.toString().trim()
  // 校验选中内容非空，且选中区域属于你要监听的目标范围
  if (selectedText && targetArea.contains(selection.anchorNode)) {
    // 此处替换为你自己的自定义bottom sheet唤起逻辑
    openCustomBottomSheet(selectedText)
    // 可选配置：如果不需要保留系统自带的选中高亮，可手动清除
    // selection.removeAllRanges()
  }
})

• 兼容注意事项
  • 部分安卓原生浏览器可能需要额外监听touchstart/touchend事件做拦截，避免默认菜单漏出
  • iOS Safari中如果选中内容包含链接，需要额外给a标签补充-webkit-touch-callout: none样式

内容的提问来源于stack exchange，提问作者Mustafa Özgün