Tôi muốn một hàm cho tôi biết phần tử nào con trỏ chuột kết thúc.
Vì vậy, ví dụ: nếu chuột của người dùng ở trên vùng văn bản này (có id wmd-input), việc gọi window.which_element_is_the_mouse_on()sẽ có chức năng tương đương với$("#wmd-input")
Tôi muốn một hàm cho tôi biết phần tử nào con trỏ chuột kết thúc.
Vì vậy, ví dụ: nếu chuột của người dùng ở trên vùng văn bản này (có id wmd-input), việc gọi window.which_element_is_the_mouse_on()sẽ có chức năng tương đương với$("#wmd-input")
Câu trả lời:
Có một chức năng thực sự thú vị được gọi là document.elementFromPointnó hoạt động như thế nào.
Những gì chúng ta cần là tìm các coords x và y của chuột và sau đó gọi nó bằng các giá trị đó:
var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);event.targethoặc bất cứ điều gì
event.target?
eventlà gì và nó ra sao
Trong các trình duyệt mới hơn, bạn có thể làm như sau:
document.querySelectorAll( ":hover" );Điều đó sẽ cung cấp cho bạn Danh sách NodeList của các mục mà chuột hiện đang lướt qua theo thứ tự tài liệu. Phần tử cuối cùng trong NodeList là phần tử cụ thể nhất, mỗi phần tử đứng trước phải là cha mẹ, ông bà, v.v.
<li>lúc trên các <li>phần tử khác .
$(':hover')nhưng đó là về cơ bản cùng một điều: jsfiddle.net/pmrotule/2pks4tf6
(function(){ var q = document.querySelectorAll(":hover"); return q[q.length-1]; })()
mousemovecó thể ảnh hưởng đến hiệu suất
Mặc dù phần sau có thể không thực sự trả lời câu hỏi, vì đây là kết quả đầu tiên của googling (trình duyệt có thể không hỏi chính xác câu hỏi giống nhau :), hy vọng nó sẽ cung cấp thêm một số thông tin đầu vào.
Trên thực tế, có hai cách tiếp cận khác nhau để có được danh sách tất cả các yếu tố mà con chuột hiện đang sử dụng (có lẽ đối với các trình duyệt mới hơn):
Như trong câu trả lời của dherman, người ta có thể gọi
var elements = document.querySelectorAll(':hover');Tuy nhiên, điều này giả định rằng chỉ con cái mới phủ lên tổ tiên của chúng, điều này thường xảy ra, nhưng không đúng nói chung, đặc biệt là khi xử lý SVG trong đó phần tử trong các nhánh khác nhau của cây DOM có thể chồng lên nhau.
Phương pháp này sử dụng document.elementFromPoint(x, y)để tìm phần tử trên cùng, tạm thời ẩn nó (vì chúng tôi khôi phục nó ngay lập tức trong cùng ngữ cảnh, trình duyệt sẽ không thực sự hiển thị điều này), sau đó tiếp tục tìm phần tử trên cùng thứ hai ... Trông hơi hacky, nhưng nó trả về những gì bạn mong đợi khi có, ví dụ: các phần tử anh chị em trong một cây che khuất nhau. Vui lòng tìm bài đăng này để biết thêm chi tiết,
function allElementsFromPoint(x, y) {
var element, elements = [];
var old_visibility = [];
while (true) {
element = document.elementFromPoint(x, y);
if (!element || element === document.documentElement) {
break;
}
elements.push(element);
old_visibility.push(element.style.visibility);
element.style.visibility = 'hidden'; // Temporarily hide the element (without changing the layout)
}
for (var k = 0; k < elements.length; k++) {
elements[k].style.visibility = old_visibility[k];
}
elements.reverse();
return elements;
}Hãy thử cả hai và kiểm tra lợi nhuận khác nhau của chúng.
Document.elementsFromPoint(x, y) stackoverflow.com/a/31805883/1059828
elementFromPoint()chỉ nhận phần tử đầu tiên trong cây DOM. Điều này hầu như KHÔNG đủ cho nhu cầu của các nhà phát triển. Để có được nhiều hơn một phần tử tại vị trí con trỏ chuột hiện tại, đây là chức năng bạn cần:
document.elementsFromPoint(x, y) . // mind the 's' in elementsĐiều này trả về một mảng tất cả các đối tượng phần tử dưới điểm đã cho. Chỉ cần chuyển các giá trị X và Y của chuột vào hàm này.
Thông tin thêm tại đây: https://developer.mozilla.org/en-US/docs/Web/API/document/elementsFromPoint
Đối với các trình duyệt rất cũ không được hỗ trợ, bạn có thể sử dụng câu trả lời này làm dự phòng.
Bong bóng sự kiện di chuột qua, vì vậy bạn có thể đặt một người nghe vào cơ thể và đợi họ bong bóng, sau đó lấy event.targethoặc event.srcElement:
function getTarget(event) {
var el = event.target || event.srcElement;
return el.nodeType == 1? el : el.parentNode;
}
<body onmouseover="doSomething(getTarget(event));">document.elementFromPoint(x, y).
Đoạn mã sau đây sẽ giúp bạn lấy phần tử của con trỏ chuột. Các phần tử kết quả sẽ hiển thị trong bảng điều khiển.
document.addEventListener('mousemove', function(e) {
console.log(document.elementFromPoint(e.pageX, e.pageY));
})e.clientXvà e.clientYthay thế (thử nghiệm trên Firefox 59).
Bạn có thể xem mục tiêu của mouseoversự kiện trên một số tổ chức phù hợp:
var currentElement = null;
document.addEventListener('mouseover', function (e) {
currentElement = e.target;
});<!-- One simple solution to your problem could be like this: -->
<div>
<input type="text" id="fname" onmousemove="javascript: alert(this.id);" />
<!-- OR -->
<input type="text" id="fname" onclick="javascript: alert(this.id);" />
</div>
<!-- Both mousemove over the field & click on the field displays "fname"-->
<!-- Works fantastic in IE, FireFox, Chrome, Opera. -->
<!-- I didn't test it for Safari. -->DEMO: D Di chuyển chuột của bạn trong cửa sổ đoạn mã: D
<script>
document.addEventListener('mouseover', function (e) {
console.log ("You are in ",e.target.tagName);
});
</script>Mục tiêu của mousemovesự kiện DOM là phần tử DOM cao nhất dưới con trỏ khi chuột di chuyển:
(function(){
//Don't fire multiple times in a row for the same element
var prevTarget=null;
document.addEventListener('mousemove', function(e) {
//This will be the top-most DOM element under cursor
var target=e.target;
if(target!==prevTarget){
console.log(target);
prevTarget=target;
}
});
})();Điều này tương tự như giải pháp của @Philip Walton, nhưng không yêu cầu jQuery hoặc setInterval.
Bạn có thể sử dụng bộ chọn này để khai thác đối tượng và hơn là thao tác đối tượng đó như đối tượng jquery. $(':hover').last();
Hãy để tôi bắt đầu bằng cách nói rằng tôi không khuyên bạn nên sử dụng phương pháp mà tôi sắp đề xuất. Đó là tốt hơn để sử dụng sự kiện thúc đẩy phát triển và ràng buộc sự kiện duy nhất để các yếu tố bạn đang quan tâm đến việc biết hay không chuột đã qua với mouseover, mouseout, mouseenter, mouseleavevv
Nếu bạn hoàn toàn PHẢI có khả năng biết con chuột đang ở phần tử nào, bạn cần viết một hàm liên kết mouseoversự kiện với mọi thứ trong DOM, rồi lưu trữ bất kỳ phần tử hiện tại nào trong một số biến.
Bạn có thể như thế này:
window.which_element_is_the_mouse_on = (function() {
var currentElement;
$("body *").on('mouseover', function(e) {
if(e.target === e.currentTarget) {
currentElement = this;
}
});
return function() {
console.log(currentElement);
}
}());Về cơ bản, tôi đã tạo một hàm ngay lập tức đặt sự kiện trên tất cả các phần tử và lưu trữ phần tử hiện tại trong phần đóng để giảm thiểu dấu chân của bạn.
Đây là bản demo hoạt động gọi window.which_element_is_the_mouse_onmỗi giây và ghi lại phần tử mà con chuột hiện đang truy cập vào bảng điều khiển.
Câu hỏi cũ nhưng là một giải pháp cho những ai có thể vẫn đang gặp khó khăn. Bạn muốn thêm mouseoversự kiện vào phần tử 'cha' của (các) phần tử con mà bạn muốn phát hiện. Đoạn mã dưới đây cho bạn biết cách thực hiện nó.
const wrapper = document.getElementById('wrapper') //parent element
const position = document.getElementById("displaySelection")
wrapper.addEventListener('mousemove', function(e) {
let elementPointed = document.elementFromPoint(e.clientX, e.clientY)
console.log(elementPointed)
});