禁用系统长按菜单需同时设置 user-select: none（含全前缀）和 -webkit-touch-callout: none，并在目标元素上监听 touchstart 和 contextmenu 事件并调用 e.preventdefault()。
怎么用 user-select 和 -webkit-touch-callout 禁用默认菜单
这两个 CSS 属性是禁用系统长按菜单最基础、也最容易漏掉的组合。单独写任何一个都大概率失效，尤其在安卓微信里：-webkit-touch-callout: none 对 iOS 有效，但 X5 内核基本无视它；user-select: none 在 Android 上更关键，但必须带 -webkit- 前缀才覆盖老版本。
实操建议：
- 样式必须作用在**实际触发长按的元素上**，比如消息气泡里的
<div class="msg-bubble">，而不是外层列表容器 <li>同时声明所有前缀：<code>user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -
-webkit-touch-callout: none只需写一次，它不继承，也不需要加前缀变体 - 若该区域含
<input>或contenteditable元素，得在它们上面显式重置：user-select: text - 监听必须绑定到目标元素本身，不能委托给父级：
el.addEventListener('touchstart', e => e.preventDefault()) - 避免全局监听
document，否则会干扰页面滚动和 input 聚焦 - 检查是否在
touchstart中调用了e.preventDefault()：没这句，iOS 仍可能高亮文字，Android 微信仍可能呼出搜索菜单 - 如果元素是
<a href="#"></a>，还得加e.preventDefault()防止跳转，再加role="button"保证语义正确 - 对同一元素补监听：
el.addEventListener('contextmenu', e => e.preventDefault()) - 这个监听可以和
touchstart放在一起，但不能省略 - 不要用
oncontextmenu=""行内写法，它在某些 WebView 中不生效 - 如果菜单本身要支持右键（PC 端），得用
if ('ontouchstart' in window)判断环境再决定是否阻止 - 若按钮只需响应点击，且明确不需要任何触控反馈，
pointer-events: none+user-select: none是最简方案 - 若按钮要支持 tap、hold、drag 多种手势，必须回退到
touchstart+touchmove+touchend+touchcancel的完整链路 - 特别注意：
pointer-events: none会让focus失效，键盘用户无法 tab 到该按钮，可访问性直接归零 - 用
role="button"和tabindex="0"也不能挽救——因为 pointer-events 已经切断了事件流
为什么只加 CSS 还会弹出菜单？touchstart.preventDefault() 必须配
很多开发者加完 CSS 就以为万事大吉，结果真机一测还是弹窗——因为浏览器默认行为没被真正拦截。CSS 只是“告诉浏览器别显示”，而 touchstart 事件里的 e.preventDefault() 是“命令浏览器立刻放弃后续处理”。两者缺一不可。
实操建议：
contextmenu 事件在安卓微信里必须显式阻止
微信安卓版（X5 内核）对长按的处理逻辑和 Safari 不同：它不依赖 touchstart 时长，而是直接把长按映射为 contextmenu 事件。这意味着即使你清除了定时器、禁用了选择，只要没监听并阻止 contextmenu，菜单照弹。
实操建议：
按钮类元素要不要设 pointer-events: none？
能最快禁用长按，但代价是彻底废掉所有交互。它适合纯展示场景（比如禁止保存的宣传图），但不适合需要点击、拖拽或自定义长按逻辑的按钮。
实操建议：
真正容易被忽略的点不是“怎么写”，而是“写在哪”：样式必须命中承载文本的最小粒度元素，JS 监听必须绑定到那个元素本身，且三者（CSS + touchstart + contextmenu）得在同一层级生效。跨组件、跨 Shadow DOM 或 CSS-in-JS 隔离时，很容易漏掉其中一环。
