DOM-Textknoten von Punkt holen?

Genau wie ich ein Element von einem Punkt mit document.elementFromPoint oder document.getElementFromPoint bekommen kann, ist es möglich, irgendwie einen Textknoten zu bekommen, wenn der Punkt an einem Textknoten ist? Ich denke, wenn ich wenigstens die Position und Größe des Textknotens herausfinden könnte, könnte ich herausfinden, welcher von ihnen den Punkt enthält. Dann haben DOM-Knoten keine Positionseigenschaften. Ist das überhaupt möglich?DOM-Textknoten von Punkt holen?

Quelle

2012-11-28 Juan

Hier ist eine Implementierung, die in allen gängigen Browsern funktioniert: 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; 
};

Quelle

2012-12-09 17:28:31

Einfach toll, gerade habe ich gerade genau diese Funktion fertig geschrieben ~ oh naja :) Habe mein upvote für den 'createRange' Teil herausgefunden, nahm mich ein paar Minuten bevor es mich traf: P –

Danke! Du bist der Beste :) –

Sie können element.nodeName verwenden, um zu sehen, ob es ein Textknoten ist, und dann element.nodeValue für seinen Wert.

Quelle

2012-11-28 03:18:05 Ben

Ich würde davon ausgehen, dass 'getElementFromPoint 'nur zurückgeben s Elementknoten. –

Ahh, ja, du hast Recht: https://developer.mozilla.org/en-US/docs/DOM/document.elementFromPoint gibt an, dass 'element ein element object' sein muss (das ist ein anderer XML-Typ als a Textobjekt) – Ben

In Anbetracht dieses Dokument (fiddle):

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

Und diesen Code:

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

Wenn Sie irgendwo innerhalb des Tags <p> klicken, wird das Tag-Element selbst angemeldet ist. Wenn jedoch auf den umgebenden Text geklickt wird, wird <body> zurückgegeben, da Textfragmente nicht als Elemente betrachtet werden.

Fazit

Es ist nicht möglich, zu erreichen, was Sie mit elementFromPoint() wollen und weil Textfragmente ich nicht Click-Ereignisse empfangen, glaube nicht, es überhaupt möglich ist.

Quelle

2012-11-28 03:37:57

Für Firefox, Sie document.caretPositionFromPoint

Hier ist ein greap Demo verwenden sollte: https://developer.mozilla.org/en-US/docs/Web/API/document.caretPositionFromPoint

Für Chrome und Rand, versuchen document.caretRangeFromPoint(x,y)

Quelle

2014-07-02 12:55:17

leider, das ist eine Firefox-spezifische Funktion :-( – Michael

@Michael yah für andere Browser, versuche document.caretRangeFromPoint (x, y) –

DOM-Textknoten von Punkt holen?

Antwort

Verwandte Themen