移动端文本选中时如何隐藏系统默认菜单 保留选中功能显示自定义菜单

要实现移动端保留文本选中功能、同时隐藏系统默认选中文本菜单，按以下两步配置即可：

1. 基础CSS配置 #

首先通过CSS禁用移动端长按默认弹出菜单，同时保留文本选中能力：

/* 全局禁用移动端长按弹出系统菜单 */
* {
  -webkit-touch-callout: none;
}
/* 给需要支持文本选中的区域设置可选属性，不要全局禁用user-select */
.content-area {
  -webkit-user-select: text;
  user-select: text;
}
/* 可自定义选中文本的高亮样式，和你的自定义菜单风格匹配 */
::selection {
  background: #96c7ff;
  color: #1a1a1a;
}

2. JS逻辑调整 #

替换你当前的pointerup监听逻辑，同时阻止默认上下文菜单弹出：

// 1. 阻止选中文本时弹出系统默认上下文菜单
document.body.addEventListener('contextmenu', e => {
  const selectedText = window.getSelection().toString().trim();
  // 仅当存在选中内容时阻止默认行为，不影响其他区域的右键功能
  if (selectedText.length) {
    e.preventDefault();
  }
});

// 2. 用selectionchange事件监听选中文本状态，比pointerup准确性更高、兼容性更好
document.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  const selectedText = selection.toString().trim();
  if (selectedText.length) {
    // 插入你的自定义菜单显示、定位逻辑
    // showCustomMenu(selection.getRangeAt(0).getBoundingClientRect())
  } else {
    // 无选中内容时隐藏自定义菜单
    // hideCustomMenu()
  }
});

// 3. 兼容部分安卓机型的长按默认菜单拦截
let longPressTimer = null;
document.body.addEventListener('touchstart', e => {
  longPressTimer = setTimeout(() => {
    const selectedText = window.getSelection().toString().trim();
    if (selectedText.length) {
      e.preventDefault();
    }
  }, 300); // 匹配系统默认长按触发阈值，可根据需求调整
});
document.body.addEventListener('touchend', () => {
  clearTimeout(longPressTimer);
});

注意事项 #

• 不要全局设置user-select: none，会直接导致文本无法选中，和需求冲突
• 可以添加移动端环境判断，仅在移动端执行上述拦截逻辑，避免影响桌面端原生功能
• 自定义菜单定位时要参考选中区域的坐标，同时做边界判断，避免菜单超出移动端视口

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