14

document.elementFromPointまたはを使用してポイントから要素を取得できるのと同じように、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

を使用element.nodeNameして、それがテキストノードであるかどうかを確認し、次にelement.nodeValueその値を確認できます。

于 2012-11-28T03:18:05.247 に答える
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 に答える