從點獲取DOM文本節點？

就像我可以從document.elementFromPoint或document.getElementFromPoint得到一個元素，是否有可能以某種方式得到一個文本節點，如果該點在文本節點？我猜如果至少我可以得到文本節點的位置和大小，那麼我可以找出它們中哪些包含這個點。但是，然後DOM節點沒有位置屬性。有沒有可能做到這一點？從點獲取DOM文本節點？

來源

2012-11-28 Juan

這裏的是，在目前所有的瀏覽器上運行的實現： https://github.com/nuxodin/q1/blob/master/q1.dom.js

document.betaNodeFromPoint = function(x, y){ 
    var el = document.elementFromPoint(x, y); 
    var nodes = el.childNodes; 
    for (var i = 0, n; n = nodes[i++];) { 
     if (n.nodeType === 3) { 
      var r = document.createRange(); 
      r.selectNode(n); 
      var rects = r.getClientRects(); 
      for (var j = 0, rect; rect = rects[j++];) { 
       if (x > rect.left && x < rect.right && y > rect.top && y < rect.bottom) { 
        return n; 
       } 
      } 
     } 
    } 
    return el; 
};

來源

2012-12-09 17:28:31

好極了，我剛剛寫完這個確切的函數〜哦，:) :)我的upvote計算出'createRange'部分，花了我幾分鐘纔打到我：P –

謝謝！你是最好的:) –

您可以使用element.nodeName來查看它是否是文本節點，然後是element.nodeValue的值。

來源

2012-11-28 03:18:05 Ben

我假設'getElementFromPoint'只返回s元素節點。 –

呵呵，是的，你是對的：https://developer.mozilla.org/en-US/docs/DOM/document.elementFromPoint指出'element必須是一個元素對象'（這是一種不同於XML的類型）文本對象） – Ben

考慮到這個文件（fiddle）：

<html> 
<body> 
    some text here 
    <p id="para1">lalala</p> 
    bla bla 
</body> 
</html>

而這種代碼：

$(document).on('click', function(evt) { 
    var elem = document.elementFromPoint(evt.clientX, evt.clientY); 
    console.log(elem); 
});

當你點擊<p>標籤內的任何地方，標籤元素本身被記錄。但是，單擊周圍的文本時，將返回<body>，因爲文本片段不被視爲元素。

結論

這是不可能做到你想要什麼elementFromPoint()因爲文字片段沒有收到點擊事件，我不認爲這是可能的。

來源

2012-11-28 03:37:57

對於Firefox，你應該使用document.caretPositionFromPoint

這裏有一個greap演示：https://developer.mozilla.org/en-US/docs/Web/API/document.caretPositionFromPoint

Chrome和邊緣，嘗試document.caretRangeFromPoint(x,y)

來源

2014-07-02 12:55:17

唉，這是一個Firefox特定功能:-( – Michael

@邁克爾耶爲其他瀏覽器，請嘗試document.caretRangeFromPoint（x，y） –

從點獲取DOM文本節點？

回答

相關問題