Получить текст DOM node из точки?

Так же, как я могу получить элемент из точки с помощью document.elementFromPoint или document.getElementFromPoint, возможно ли как-нибудь получить текст node, если точка находится в тексте node? Думаю, если бы я мог получить текст и размер текста node, я мог бы выяснить, какая из них содержит точку. Но тогда узлы DOM не имеют свойств позиции. Возможно ли это сделать вообще?

Ответ 1

Вот реализация, которая работает во всех существующих браузерах: 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;
};

Ответ 2

Для Firefox вы должны использовать document.caretPositionFromPoint

Здесь приведена демо-версия: https://developer.mozilla.org/en-US/docs/Web/API/document.caretPositionFromPoint

Для Chrome и Edge попробуйте document.caretRangeFromPoint(x,y)

Ответ 3

Вы можете использовать element.nodeName, чтобы увидеть, есть ли текст node, а затем element.nodeValue для его значения.

Ответ 4

Учитывая этот документ (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() и потому, что текстовые фрагменты не получают события щелчка, я не думаю, что это возможно вообще.