如何通过自定义热键替代鼠标双击实现自动选中文本的功能

你编写的代码未生效是因为浏览器的安全交互限制：脚本主动派发的合成dblclick事件不会触发浏览器原生的默认交互行为（比如双击选中文本、点击跳转链接等），只有用户真实操作触发的事件才会执行这些默认逻辑，因此单纯给元素派发双击事件无法实现预期效果。

直接通过鼠标坐标获取对应文本范围，模拟原生双击选单词的逻辑，无需提前获取元素引用，完美适配动态生成的页面元素，可运行代码如下：

<p>Hello world! 123 abc ABC</p>
<script>
  const HOTKEY = "Control"

  let clientX, clientY
  // 实时记录鼠标坐标
  document.addEventListener("mousemove", (e) => {
    clientX = e.clientX
    clientY = e.clientY
  })

  document.addEventListener("keydown", (keyboardEvent) => {
    // 匹配热键且避免长按重复触发
    if (keyboardEvent.key === HOTKEY && !keyboardEvent.repeat) {
      const selection = window.getSelection()
      // 清空已有选区
      selection.removeAllRanges()
      // 获取鼠标位置对应的光标文本范围
      const range = document.caretRangeFromPoint(clientX, clientY)
      if (range) {
        // 扩展范围到当前完整单词，和原生双击选中效果完全一致
        range.expand('word')
        selection.addRange(range)
      }
    }
  })
</script>

• 无需提前获取任意元素引用，所有逻辑基于实时的鼠标坐标运行，适配动态生成的页面内容
• caretRangeFromPoint方法可以直接获取指定坐标下的光标所在文本位置，精度高于elementFromPoint
• range.expand('word')调用的是浏览器原生的单词范围扩展逻辑，选中效果和用户手动双击完全一致

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