的JavaScript得到「commonAncestorContainer」的ID

所以我覺得我有點出我的聯賽在這裏。但這是我想要做的。的JavaScript得到「commonAncestorContainer」的ID

基本上，我想在一個段落中有文字的用戶選擇部分（其中可能包含許多elemnts（即<span>和<a>）返回的那款id屬性的值。這是我的想法。

？？

function getParaID() //function will be called using a mouseUp event 
{ 
var selObj = window.getSelection(); 
var selRange = selObj.getRangeAt(0); //btw can anyone explain what this zero means 
var paraElement = selRange.commonAncestorContainer; 
var paraID = paraElement.getAttribute; 

return paraID; 
}

你覺得我是什麼收

來源

2011-08-01 Jeff

是否行得通？ 'paraID'將會是'getAttribute'函數的引用，它可能不是你想要的。 –

選擇範圍的commonAncestorContainer財產可能是一個文本節點的引用，或<span>或<a>元素或<body>元素，或任何其他你可能在你的頁面。既然如此，則需要處理DOM樹以查找包含<p>元素（如果存在）。您還需要注意，IE < 9不支持window.getSelection()或DOM範圍，雖然這是可以做到的，你想在IE < 9很容易的。下面是一些代碼，將在所有主要的瀏覽器，包括IE 6：

的jsfiddle：http://jsfiddle.net/44Juf/

代碼：

function getContainingP(node) { 
    while (node) { 
     if (node.nodeType == 1 && node.tagName.toLowerCase() == "p") { 
      return node; 
     } 
     node = node.parentNode; 
    } 
} 

function getParaID() { 
    var p; 
    if (window.getSelection) { 
     var selObj = window.getSelection(); 
     if (selObj.rangeCount > 0) { 
      var selRange = selObj.getRangeAt(0); 
      p = getContainingP(selRange.commonAncestorContainer); 
     } 
    } else if (document.selection && document.selection.type != "Control") { 
     p = getContainingP(document.selection.createRange().parentElement()); 
    } 
    return p ? p.id : null; 
}

關於0傳遞給getRangeAt()，即表明其選擇的範圍，你想。 Firefox支持多種選擇範圍：如果你做出選擇，然後按住Ctrl鍵和進行另一選擇，你會發現你現在有選擇了兩個不連續的範圍內，可以通過getRangeAt(0)和getRangeAt(1)進行訪問。同樣在Firefox中，在表中選擇一列單元格爲每個選定的單元格創建一個單獨的範圍。所選範圍的數量可以使用選擇的rangeCount屬性獲得。沒有其他主要瀏覽器支持多個選定範圍。

來源

2011-08-01 11:49:57

你是相當接近。如果你想要的是父元素的ID，那麼你應該更換你的paraElement.getAttribute有paraElement.id，如：

var paraID = paraElement.id;

關於getRangeAt()的參數，它指定了要返回的選擇範圍的索引，而且它僅與允許不連續選擇的控件真正相關。例如，一個select框，其中用戶可以使用ctrl + click同時選擇幾個任意的行組。在這種情況下，您可以使用參數從一個選定區域跳到下一個區域。但是爲了突出顯示段落中的文字，您不應該有不連續的選擇，因此可以始終通過0。實質上，這意味着你要求「第一個選定的區域」。

另請注意，如果您的界面允許用戶選擇跨度多個段落，那麼您的commonAncestorContainer可能不是一個段落，也可能是它包含所有段落標籤的任何元素。所以你應該準備好處理這種情況。

編輯：

與此打了一下後，這裏是我的建議：http://jsfiddle.net/vCsZH/

基本上，而不是依賴於commonAncestorContainer此代碼適用於一個mouseDown和mouseUp監聽到每個段落（以除了已經應用於頂級容器的那個）。實質上，聽衆將記錄選擇範圍開始和結束的段落，從而更加簡單地確定選擇哪個段落。

如果曾經有贊成使用動態事件通過像jQuery框架結合的情況下，這是它。

來源

2011-08-01 10:50:02 aroth

你對'getRangeAt（）'的解釋有點偏離。 'window.getSelection（）'只能用於常規網頁內容中的用戶選擇，而不能用於表單元素，特別是不是'

的JavaScript得到「commonAncestorContainer」的ID

回答