鼠标点击时，如何判断事件坐标是否在选中文字区域

Question

（目标）实现：选中一段文字，当鼠标在这个选中区域里单击时可以弹出框或者触发一个函数

Answer 1

用一个无样式的span标签把那段文字包起来，在span标签上绑定事件

Answer 2

通过监听 selectionchange 事件可以获取到选中区域的相关信息：

document.addEventListener('selectionchange', (e) => {
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  console.info(range.getBoundingClientRect());
});

通过这个选中区域的信息与鼠标点击位置进行比较，基本上可以满足需求。

Answer 3