javascript - 无法获取所选文本的容器(可用 jsfiddle)

Question

假设我有一些像这样的 html:

  <div id='fooBar' contenteditable='true'>Hello <span class="test">World</span></div>

Javascript代码:

var fooBar = document.getElementById('fooBar');

fooBar.addEventListener('click', function() {
    console.log(window.getSelection().getRangeAt(0).commonAncestorContainer)
});

问题:为什么它无法获取名为 test 的实际容器？我不明白为什么这不起作用。我什至尝试使用 Selection.anchorNode.parentElement 。什么都不起作用。现在，当查看从 window.getSelection() 获得的对象的内部体系结构时，我没有看到作为属性列出的 span 元素。我做错了什么？

https://jsfiddle.net/w7bfmLqd/1/

Answer 1

我已经成功地使用了这个:

var fooBar = document.getElementById('fooBar');

fooBar.addEventListener('click', function() {
    console.log(window.getSelection().focusNode.parentElement);
});

https://jsfiddle.net/w7bfmLqd/2/