Question

我发现自己处于一种情况，我希望获得触发selectionChange dom事件的目标元素。

但是按https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange来判断，e.target中的元素似乎总是正常（非输入，非文本区域）情况下的文档对象。

那么这是否意味着我必须手动调用window.getSelection，找出当前的光标位置并找到那个dom节点？

有没有人知道捷径？或者一些工作的例子会很好。

非常感谢！

Answer 1

如果您的元素可以成为活动元素，请使用document.activeElement获取我们正在其中选择的元素。这将适用于文本区域，输入以及设置了tabindex的元素。

// NOTE: activeElement can only be found on selectable elements!

document.addEventListener('selectionchange',function(){
	document.getElementById('currentTag').innerHTML = document.activeElement.tagName;
});

#currentTag{
  font-weight:bold;
}

<textarea>This is sample text you can replace and move your cursor within. Whee!</textarea>

<br><input type="text" placeholder="Input">

<p tabindex="0">P tag text is the best tag text. <span color="blue">Unless you have a span.</span></p>

<ol tabindex="0">
  <li tabindex="0">Item 1</li>
  <li tabindex="0">Item 2</li>
</ol>

<p id="currentTag"></p>

Answer 2

您可以使用document.selection获取当前所选内容。

取自http://help.dottoro.com/ljixpxji.php

的示例

<head>
    <script type="text/javascript">
        document.onselectionchange = OnChange;
        function OnChange () {
            var range = document.selection.createRange ();
            if (range.text.length == 0) {
                alert ("The current selection is empty");
            }
            else {
                alert ("The contents of the current selection are\n" + range.text);
            }
        }
    </script>
</head>
<body>
    Select this text on this page!
</body>

- 编辑 -

正如@ user1017674指出的那样，这个代码在chrome中不起作用，经过一些研究后我发现document.selection只能在IE中使用＆lt; 9. window.getSelection()似乎仍然是获得它的最佳途径。

参考。 Does chrome supports document.selection?

如何获取'selectionchange'dom事件的目标元素

2 个答案: