如何获取“selectionchange” DOM事件的目标元素

Question

如何获取“selectionchange” DOM事件的目标元素

3

我发现自己处于这样一种情况：我想获取触发selectionChange dom事件的目标元素。但是根据https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange，在正常（非输入、非文本区域）情况下，e.target中的元素始终是文档对象。那么这是否意味着我必须手动调用window.getSelection，并确定当前光标位置并以此找到dom节点？有没有人知道一些捷径？或者一些工作示例会很好。

- Zhen Liu

2个回答

0

您可以使用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 < 9中使用。看来window.getSelection()仍然是获取它的最佳方式。

参考 chrome是否支持document.selection?

- blitz1616

我不知道你是否在Chrome上尝试过这段代码。在F12中将其复制并粘贴到控制台中，document.selection会一直返回undefined。有没有什么方法可以获取所选的DOM节点？ - Zhen Liu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Powlison · Accepted Answer

如果您的元素可以变为活动元素，请使用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>