獲取父元素與顯示模塊

Question

我有這個網站

<div id="editor" contenteditable="true"> 
This text is directly under div 
<p>Some text under p tag. <span> Some under span tag</span> and this is another text</p> 
<p>Another para</p> 
</div> 
<button>Get block level parent</button> 

的Javascript

function getParentBlock() { 
    element = document.getSelection().focusNode; 
    while (p = element.parentNode) { 
     displaystyle = window.getComputedStyle(p, null).getPropertyValue('display'); 
     if (displaystyle == 'block') { 
      return p; 
     } 
     element = element.parentNode; 
    } 
} 

function alertCurrentParent() { 
    alert(getParentBlock()); 
} 
btn = document.querySelector('button'); 
btn.onclick = alertCurrentParent; 

的的jsfiddle是在這裏：http://jsfiddle.net/shankardevy/aA8Kb/

現在，當我將光標放在文本中的「另一Para'或雙擊'Another Para'（在我的Mac中選擇整個段落），然後單擊按鈕「獲取塊級父級」，我將HTMLParagraphElement置於alert狀態。但是，當我將光標置於第一個段落（「p標記下的某些文本」），並且我單擊該按鈕時，我會在alert中獲得「HTMLParagraphElement」。當我雙擊選擇整個第一段的第二段，然後單擊按鈕時，我會得到「HTMLDivElement」。

我希望我的代碼能像第二段中那樣工作。即雙擊該句子並單擊該按鈕，它應該向我顯示「HTMLParagraphElement」。我怎麼做？

任何幫助非常感謝！

Answer 1

問題是，你開始與父節點的循環。當您選擇整個段落時，其父項爲DIV。因此，在當前元素而不是父級開始循環。

function getParentBlock() { 
    var element = document.getSelection().focusNode; 
    for (var p = element; p; p = p.parentNode) { 
     var style = window.getComputedStyle(p, null); 
     if (style) { 
      var displaystyle = style.getPropertyValue('display'); 
      if (displaystyle == 'block') { 
       return p; 
      } 
     } 
    } 
} 

FIDDLE

你必須調用getPropertyValue之前測試的getComputedStyle的結果，因爲文本節點沒有風格，它返回null。