三星Android端Chrome点击不可选文本触发可选文本选中切换问题求助

问题详情 #

• 测试环境：搭载最新版Android系统的三星设备，使用最新版Chrome浏览器
• 异常现象：选中页面内可选文本后，点击设置了user-select: none的不可选文本，会触发已选中的文本反复选中与取消；该问题仅在上述环境出现，PC端及iOS端无此情况
• 测试代码：

<p style="user-select: none;">By clicking here the text below will be selected and deselected<p>
<br>
<p>Select this text and then the one above this to understand the problem</p>

• 无效修复的副作用：给不可选文本添加click事件并调用event.preventDefault()后，原反复选中的问题解决，但点击该元素时无法取消已选中的文本（正常点击空白区域本应取消选中）

彻底解决方案 #

通过监听触摸/鼠标按下事件，先主动清除选中状态再阻断默认行为，兼顾两种需求：

代码实现 #

const unselectableText = document.querySelector('p[style="user-select: none;"]');

// 处理移动端触摸事件
unselectableText.addEventListener('touchstart', function(event) {
    const selection = window.getSelection();
    // 清除当前已选中的文本
    if (!selection.isCollapsed) {
        selection.removeAllRanges();
    }
    // 阻断默认行为，避免触发反复选中的异常
    event.preventDefault();
});

// 兼容桌面端鼠标操作（可选）
unselectableText.addEventListener('mousedown', function(event) {
    const selection = window.getSelection();
    if (!selection.isCollapsed) {
        selection.removeAllRanges();
    }
    event.preventDefault();
});

逻辑说明 #

三星Chrome对user-select:none元素的点击事件存在特殊处理逻辑，直接在click事件里调用preventDefault()会连取消选中的逻辑一起阻断。改用touchstart/mousedown事件，先主动清除选中状态再阻止默认行为，既解决了反复选中的异常，又保留了点击元素取消选中的正常交互。

纯CSS替代方案（有限适用） #

如果该元素不需要绑定任何交互事件，可以尝试添加额外CSS属性修复：

.unselectable {
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

注意：pointer-events: none会让元素完全失去交互性，若该元素有点击、触摸等需求，请勿使用此方案。

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