window.getSelection()返回空主因是事件时机不当：右键（contextmenu）会清空选区，须改在mouseup时缓存Selection对象，再于contextmenu中使用；同时需校验rangeCount>0及toString().trim()非空。
为什么 window.getSelection() 获取的文本范围经常为空
直接调用 window.getSelection() 时返回空或长度为 0，通常不是 API 本身的问题，而是触发时机不对。右键事件（contextmenu）默认会取消选区，尤其在鼠标未拖动、仅点击后右键时，浏览器已清空 Selection 对象。
解决办法是把获取逻辑提前到 mousedown 或 mouseup 阶段，并缓存结果：
let cachedSelection = null;
document.addEventListener('mouseup', () => {
cachedSelection = window.getSelection();
// 注意：这里不能只存 .toString()，要保留原 Selection 对象才能后续操作
});
document.addEventListener('contextmenu', e => {
if (cachedSelection && cachedSelection.rangeCount > 0) {
e.preventDefault();
showCustomMenu(e.clientX, e.clientY, cachedSelection.toString());
}
});
- 不要在
contextmenu里直接调用window.getSelection()—— 大概率为空 -
mouseup比mousedown更可靠，因它确保鼠标已释放，选区已稳定 - 如果用户右键的是空白处（非文本），
cachedSelection可能仍有效但内容为空，需额外判断cachedSelection.toString().trim()
如何让右键菜单精准定位到光标/选区位置
右键坐标（e.clientX/e.clientY）默认是鼠标点位，但用户可能希望菜单“靠近被选中文本的末尾”或“居中于选区矩形”，这时得从 Selection 提取几何信息。
Selection 本身不提供坐标，但可通过其首个 Range 的 getBoundingClientRect() 获取近似位置：
立即学习“前端免费学习笔记（深入）”；
function getSelectionRect(selection) {
if (!selection.rangeCount) return null;
const range = selection.getRangeAt(0);
// 尝试获取视觉矩形；若 range 跨越不可见元素，可能返回空对象
const rect = range.getBoundingClientRect();
if (rect.width === 0 && rect.height === 0) {
// 回退方案：用 range 的 endContainer 末尾位置估算
const dummy = document.createElement('span');
dummy.textContent = '\u200B'; // 零宽空格
range.insertNode(dummy);
const fallbackRect = dummy.getBoundingClientRect();
dummy.remove();
return fallbackRect;
}
return rect;
}
- 直接用
e.clientX/e.clientY最简单，适合通用场景 - 用
getBoundingClientRect()更精准，但仅适用于 range 在可视 DOM 中且未被裁剪的情况 - 某些编辑器（如
contenteditable区域）里，range 可能跨多个文本节点，getBoundingClientRect()返回的是包围盒，未必是光标点
在 contenteditable 编辑器中右键菜单失效的常见原因
很多 HTML 编辑器基于 contenteditable="true"，此时右键行为更复杂：浏览器可能仍弹出原生菜单，或 contextmenu 事件被父容器拦截。
关键检查点：
- 确保目标元素（如
div[contenteditable]）自身监听了contextmenu，而不是只挂在document上——事件可能没冒泡上来 -
contenteditable元素上需设置user-select: text（尤其在 Safari 中，否则getSelection()常返回空） - 某些框架（如 Draft.js、Slate）会阻止默认行为并接管选区管理，此时
window.getSelection()可能被重写或滞后，应优先使用框架提供的 API（如 Slate 的editor.selection） - 移动端 WebKit 下，长按触发的“右键等效”行为不会触发
contextmenu，需监听touchstart+ 定时器模拟
自定义菜单插入 DOM 后如何避免被编辑器意外吞掉
把菜单 <div class="custom-menu"> 直接 appendChild 到 contenteditable 区域内，会导致它变成可编辑内容的一部分，甚至被格式化、删除或参与光标导航。
正确做法是将菜单挂载到 document.body，并用 position: fixed 定位：
const menu = document.createElement('div');
menu.className = 'custom-menu';
menu.innerHTML = '<button data-action="bold">加粗</button>';
document.body.appendChild(menu); // 不要 append 到 contenteditable 内部
menu.style.position = 'fixed';
menu.style.left = x + 'px';
menu.style.top = y + 'px';
- 菜单 DOM 必须脱离
contenteditable树，否则编辑器的序列化逻辑（如innerHTML导出）会把它当内容导出 - 用
fixed而非absolute，避免滚动时菜单错位 - 记得在菜单显示后监听一次
click外部区域自动关闭，同时在编辑器获得焦点（focusin）时也关闭——否则用户点回编辑器，菜单还挂着
