selectionchange事件只能绑定在document或window上，不冒泡且不提供选中内容，需配合window.getselection()获取；注意iframe隔离、空选处理及移动端兼容性，并建议防抖优化。
selectionchange 是一个在用户改变文本选中状态（比如鼠标拖选、键盘 Shift+方向键、双击词等）时触发的事件，但它**不冒泡、无法直接绑定在普通元素上，只能监听 document 或 window**。它本身不提供选中文本内容，需配合 window.getSelection() 才能实时获取。
监听 selectionchange 事件
必须将事件监听器添加到 document（推荐）或 window 上：
- ✅ 正确写法：
document.addEventListener('selectionchange', handler) - ❌ 错误写法：
element.addEventListener('selectionchange', ...)（无效，该事件不传播到子元素） - ⚠️ 注意：页面加载后立即监听，否则可能错过初始选中（如用户刷新后已选中文字）
获取选中的文本内容
在事件回调中调用 window.getSelection()，它返回一个 Selection 对象：
-
selection.toString()→ 最常用，返回纯文本（如"Hello world"） -
selection.anchorNode和selection.focusNode→ 可定位选中范围的 DOM 节点 -
selection.rangeCount > 0→ 确保有有效选中（避免空选或跨 iframe 场景异常） - 示例：
<script><br> document.addEventListener('selectionchange', () => {<br> const sel = window.getSelection();<br> if (sel.rangeCount > 0) {<br> console.log('选中了：', sel.toString());<br> }<br> });<br> </script>
处理常见边界情况
实际使用中需注意这些细节：
- iframe 内选中不会触发父页的 selectionchange → 如需监听 iframe，需在其内部 document 上单独监听
-
点击空白处或失去焦点时选中会清空 →
selection.toString()返回空字符串，可据此做清除操作 - 移动端兼容性良好（iOS Safari / Chrome Android 均支持），但部分 WebView（如旧版微信内置浏览器）可能不触发或延迟
- 避免高频重复处理 → 拖选过程中会连续触发，可用防抖（如 100ms）优化性能
替代方案与补充建议
如果需要更精细控制（比如只监听特定区域），可组合使用：
-
mousedown/mouseup+setTimeout(..., 0)延迟读取选中（兼容性更强，但非标准实时） -
input或keyup事件监听编辑场景（仅适用于可编辑元素） - 对
contenteditable元素，还可监听selectstart（选中开始前）做拦截
