WKWebView长按user-select:none区域误选其他文本如何解决

问题原因 #

这是iPadOS端WKWebView的原生默认文本选择策略导致的：系统长按手势触发后，会自动在触摸点附近遍历查找最近的可选中（user-select: text）文本块并触发选中，仅靠CSS的user-select: none无法完全拦截该原生手势的查找逻辑。

修复方案 #

前端侧方案（优先） #

1. 调整CSS属性，给不可选区域补充WebKit内核特有的长按行为控制属性，同时保证可选择区域的功能正常：

.with-select {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  /* 新增属性，保证可选择区域的长按选中文本功能正常 */
  -webkit-touch-callout: default;
}
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  /* 新增以下属性，禁用iOS端长按该区域的默认文本选择、系统菜单弹出逻辑 */
  -webkit-touch-callout: none;
}

2. 如果需要在不可选区域自定义长按逻辑（比如导航栏长按呼出自定义上下文菜单），可额外添加JS事件拦截，避免原生手势干扰：

document.querySelectorAll('.no-select').forEach(el => {
  el.addEventListener('longpress', e => {
    // 这里写入你的自定义菜单触发逻辑
    e.preventDefault();
  });
  // 兼容部分系统版本longpress事件不生效的场景
  el.addEventListener('touchstart', e => {
    if (getComputedStyle(e.target).webkitUserSelect === 'none') {
      e.preventDefault();
    }
  }, { passive: false });
});

原生iOS侧方案（前端修改受限的场景） #

无需改动前端代码，在原生应用层面对WKWebView做全局配置即可：

• 注入全局WKUserScript，把上述CSS和JS逻辑全局注入到所有加载的页面中
• 实现UIGestureRecognizerDelegate协议，判断长按手势的触发位置对应的DOM元素是否为不可选状态，若为不可选则直接返回NO禁用该手势

验证说明 #

修改后长按不可选区域时，系统不会再自动选中附近可编辑区域的文本，自定义的上下文菜单逻辑也可正常触发。

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