不能得到所選文本的容器（的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) 
}); 

問：爲什麼不會它得到實際的容器命名測試？我不知道爲什麼這不會工作。我甚至用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/