14

就像我可以用document.elementFromPointor从一个点获取一个元素一样document.getElementFromPoint，如果该点位于一个文本节点上，是否有可能以某种方式获取一个文本节点？我想如果至少我能得到文本节点的位置和大小，我就可以找出其中哪些包含该点。但是 DOM 节点没有位置属性。有可能做到这一点吗？

4

4 回答 4

17

这是一个适用于所有当前浏览器的实现： 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-09T17:28:31.233 回答
2

对于 Firefox，您应该使用document.caretPositionFromPoint

这是一个 greap 演示：https ://developer.mozilla.org/en-US/docs/Web/API/document.caretPositionFromPoint

对于 Chrome 和 Edge，请尝试document.caretRangeFromPoint(x,y)

于 2014-07-02T12:55:17.577 回答
0

考虑到这个文件（小提琴）：

<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-28T03:37:57.323 回答
0

您可以使用element.nodeName它来查看它是否是文本节点，然后element.nodeValue查看它的值。

于 2012-11-28T03:18:05.247 回答