如何在双击 div、p、span 时获取所选单词？

Question

你能获取用户双击的单词吗？我尝试在onDblClick事件处理程序中，但selectionStart在那里是未定义的；而onselect事件似乎仅适用于文本区域。

- Tim

---

我唯一能做到这一点的方法是将每个单词都包裹在自己的SPAN标签中。雅虎知道当你右键点击时哪个单词被突出显示。而在IE中，加速器也知道被突出显示的单词。它们是通过连接到JavaScript/DOM层下方的浏览器API来实现的吗？ - Tim

也就是，在 Firefox 的上下文菜单中，有 Yahoo 搜索选项。 - Tim

Answer 1

在IE中可以使用document.selection.createRange().text，在Firefox和WebKit中可以使用window.getSelection().toString()，并将其附加到ondblclick处理程序中：

document.ondblclick = function () {
   var sel = (document.selection && document.selection.createRange().text) ||
             (window.getSelection && window.getSelection().toString());
   alert(sel);
};

参考资料:

• MSDN，有关 document.selection
• MDN，有关 window.getSelection()

- David Tang

Answer 2

David Tang的好答案

而我使用的是window.getSelection().toString()。

---

我想分享一下，你也可以使用 baseOffset 和 extentOffset。

<p>test data.</p>

<script>
  document.addEventListener("dblclick", (e)=>{
    const selection = document.getSelection()
    // console.log(selection.anchorNode.data) // is whole text: "test data."
    const selectContent = selection.anchorNode.data.slice(selection.baseOffset, selection.extentOffset)
    console.log(selectContent)    
  })
</script>

- Carson