Ottieni il nodo di testo DOM dal punto?

Proprio come è possibile ottenere un elemento da un punto con document.elementFromPoint o document.getElementFromPoint, è possibile ottenere in qualche modo un nodo di testo se il punto si trova su un nodo di testo? Immagino che se almeno riuscissi a ottenere la posizione e la dimensione del nodo di testo, potrei quindi capire quale di essi contiene il punto. Ma poi i nodi DOM non hanno proprietà di posizione. È possibile farlo affatto?Ottieni il nodo di testo DOM dal punto?

fonte

2012-11-28 Juan

Ecco un'implementazione che funziona in tutti i browser attuali: 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; 
};

fonte

2012-12-09 17:28:31

Semplicemente fantastico, ho appena finito di scrivere questa funzione esatta ~ oh beh :) Avere la mia upvote per capire la parte 'createRange', mi ci è voluto un paio di minuti prima che mi colpisse: P –

Grazie! Sei il migliore :) –

È possibile utilizzare element.nodeName per verificare se si tratta di un nodo di testo e quindi element.nodeValue per il suo valore.

fonte

2012-11-28 03:18:05 Ben

Suppongo che 'getElementFromPoint' restituisca solo s nodi elemento. –

Ah, sì, hai ragione: https://developer.mozilla.org/en-US/docs/DOM/document.elementFromPoint afferma che 'elemento deve essere un oggetto oggetto' (che è un tipo XML diverso da un oggetto di testo) – Ben

Considerando questo documento (fiddle):

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

E questo codice:

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

Quando si sceglie un punto qualsiasi all'interno del tag <p>, l'elemento tag stesso viene registrato. Tuttavia, quando si fa clic sul testo circostante, viene restituito <body> perché i frammenti di testo non sono considerati elementi.

Conclusione

Non è possibile realizzare ciò che si vuole con elementFromPoint() e perché frammenti di testo non ricevono eventi click, non credo che sia possibile a tutti.

fonte

2012-11-28 03:37:57

Per Firefox, è necessario utilizzare document.caretPositionFromPoint

Ecco una demo greap: https://developer.mozilla.org/en-US/docs/Web/API/document.caretPositionFromPoint

per Chrome e bordo, prova document.caretRangeFromPoint(x,y)

fonte

2014-07-02 12:55:17

ahimè, questa è una funzione specifica di Firefox :-( – Michael

@Michael yah per altri browser, prova document.caretRangeFromPoint (x, y) –

Ottieni il nodo di testo DOM dal punto?

risposta

Problemi correlati