Cũng giống như tôi có thể lấy một phần tử từ một điểm với document.elementFromPoint hoặc document.getElementFromPoint, có thể bằng cách nào đó lấy một nút văn bản nếu điểm đó ở một nút văn bản không? Tôi đoán nếu ít nhất tôi có thể có được vị trí và kích thước của nút văn bản thì tôi có thể tìm ra cái nào trong số chúng chứa điểm. Nhưng sau đó các nút DOM không có thuộc tính vị trí. Có thể làm được điều này không?Nhận nút văn bản DOM từ điểm?
Đây là một thực hiện mà làm việc trong tất cả các trình duyệt hiện tại: 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;
};
Bạn có thể sử dụng element.nodeName để xem đó có phải là nút văn bản hay không và sau đó element.nodeValue cho giá trị của nó.
Tôi giả định rằng 'getElementFromPoint' chỉ trả về nút phần tử s. –
Ahh, vâng, bạn nói đúng: https://developer.mozilla.org/en-US/docs/DOM/document.elementFromPoint nói rằng 'phần tử phải là một đối tượng phần tử' (là một kiểu XML khác với một đối tượng văn bản) – Ben
Xét tài liệu này (fiddle):
<html>
<body>
some text here
<p id="para1">lalala</p>
bla bla
</body>
</html>
Và mã này:
$(document).on('click', function(evt) {
var elem = document.elementFromPoint(evt.clientX, evt.clientY);
console.log(elem);
});
Khi bạn nhấp vào bất cứ nơi nào bên trong thẻ <p>, yếu tố chính bản thân thẻ được đăng nhập. Tuy nhiên, khi các văn bản xung quanh được nhấp vào, các <body> được trả lại bởi vì đoạn văn bản không được coi là yếu tố.
Kết luận
Đó là không thể thực hiện những gì bạn muốn với elementFromPoint() và vì đoạn văn bản không nhận được sự kiện nhấp chuột, tôi không nghĩ rằng nó có thể ở tất cả.
Đối với Firefox, bạn nên sử dụng document.caretPositionFromPoint
Dưới đây là một bản demo greap: https://developer.mozilla.org/en-US/docs/Web/API/document.caretPositionFromPoint
Đối với Chrome và Edge, hãy thử document.caretRangeFromPoint(x,y)
than ôi, đây là một chức năng cụ thể của Firefox :-( – Michael
@Michael yah cho các trình duyệt khác, hãy thử document.caretRangeFromPoint (x, y) –
Thật tuyệt, tôi vừa mới viết xong chức năng chính xác này ~ oh well :) Có upvote của tôi để tìm ra phần 'createRange', đưa tôi một vài phút trước khi nó đánh tôi: P –
Cảm ơn! Bạn là tốt nhất :) –