select-none 无法禁用长按菜单，因其仅阻止文本选中，不干预系统级上下文菜单；需配合 -webkit-touch-callout: none 才能有效抑制 ios 长按弹窗。
移动端长按默认会触发文字选中或弹出菜单，select-none 类不能禁用长按行为本身，只能阻止文字被选中——这是最常见的误解。
为什么 select-none 对长按没用
select-none 只作用于 CSS 的 user-select 属性，它影响的是「是否允许用户选中文本」，和「长按触发的原生交互（如复制、搜索、翻译菜单）」是两套机制。iOS Safari 和 Android Chrome 在长按时仍会检测可交互区域并弹出上下文菜单，哪怕文字不可选。
- 现象：
select-none加了，但长按依然弹出「复制」「搜索」等菜单 - 原因：浏览器把长按识别为「手势触发上下文菜单」，不是「文本选择操作」
- 兼容性：
user-select: none在 iOS 上对<input>、<textarea></textarea>、contenteditable元素基本无效
真正禁用长按菜单的 Tailwind 写法
需要组合使用两个 CSS 属性：user-select: none（对应 select-none） + -webkit-touch-callout: none（iOS 专用）。Tailwind 默认不提供后者，必须自定义或直接写内联样式。
- 推荐方案：在元素上同时加
select-none和class="[-webkit-touch-callout:none]" - 更稳妥写法（尤其针对按钮/卡片）：
<div class="select-none [-webkit-touch-callout:none] active:opacity-80">...</div>
- 注意：
[-webkit-touch-callout:none]是 Tailwind 的任意值语法，仅在启用了jit或 v3.1+ 的content扫描模式下生效
长按禁用 ≠ 点击失效，别误伤交互
禁用长按菜单后，click、tap、pointerdown 事件照常触发。但如果目标是「完全禁止用户与该区域交互」，仅靠 CSS 不够，还得配合 JS 阻止事件：
- 纯 CSS 方案只管视觉反馈和系统菜单，不阻止 JS 事件
- 若需彻底禁用（比如防止误点），加
pointer-events-none—— 但会同时禁掉点击、悬停等所有交互 - 常见误用：
select-none pointer-events-none会让按钮无法点击，除非你本意就是「纯展示」
最常被忽略的一点：Android WebView 和某些定制浏览器（如微信内置 X5）会忽略 -webkit-touch-callout，此时只能靠 JS 拦截 contextmenu 事件 + preventDefault()。CSS 层面能做到的，始终只是「降低触发概率」，不是「绝对禁用」。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
