从点获取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文本节点？

回答

相关问题