Tak jak mogę uzyskać element z punktu o numerze document.elementFromPoint lub document.getElementFromPoint, czy jest możliwe, aby uzyskać węzeł tekstowy, jeśli punkt znajduje się w węźle tekstowym? Sądzę, że gdybym przynajmniej mógł uzyskać położenie i rozmiar węzła tekstowego, mógłbym określić, który z nich zawiera punkt. Ale wtedy węzły DOM nie mają właściwości położenia. Czy można to w ogóle zrobić?Uzyskaj węzeł tekstowy DOM z punktu?
Tutaj jest implementacją, która działa we wszystkich aktualnych przeglądarek: 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;
};
Można użyć element.nodeName aby sprawdzić, czy jest to węzeł tekstowy, a następnie element.nodeValue dla jego wartości.
Założę, że 'getElementFromPoint' tylko zwróci Węzły elementów. –
Ach, tak, masz rację: https://developer.mozilla.org/en-US/docs/DOM/document.elementFromPoint stwierdza, że 'element musi być obiektem elementu' (który jest innym typem XML niż obiekt tekstowy) – Ben
Biorąc pod uwagę ten dokument (fiddle):
<html>
<body>
some text here
<p id="para1">lalala</p>
bla bla
</body>
</html>
i ten kod:
$(document).on('click', function(evt) {
var elem = document.elementFromPoint(evt.clientX, evt.clientY);
console.log(elem);
});
Po kliknięciu w dowolnym miejscu wewnątrz znacznika <p>, sam element znacznik jest rejestrowane. Jednak po kliknięciu otaczającego tekstu zwracana jest wartość <body>, ponieważ fragmenty tekstu nie są elementami.
Wnioski
To nie jest możliwe, aby osiągnąć to, co chcesz z elementFromPoint() i dlatego fragmenty tekstu nie odbierać zdarzenia kliknięcia, nie sądzę, że to w ogóle możliwe.
Dla Firefox, należy użyć document.caretPositionFromPoint
Oto greap demo: https://developer.mozilla.org/en-US/docs/Web/API/document.caretPositionFromPoint
Dla Chrome i Edge, spróbuj document.caretRangeFromPoint(x,y)
Niestety, jest to funkcja specyficzna dla Firefoksa :-( – Michael
@Michael yah dla innych przeglądarek, spróbuj document.caretRangeFromPoint (x, y) –
Po prostu świetnie, właśnie skończyłem pisać tę dokładną funkcję ~ no cóż :) Miałem mój pomysł na odgadnięcie części 'createRange', zabrało mi kilka minut zanim mnie uderzyło: P –
Dzięki! Jesteś najlepszy :) –