Saya menginginkan fungsi yang memberi tahu saya elemen mana kursor mouse berakhir.
Jadi, misalnya, jika mouse pengguna berada di atas area teks ini (dengan id wmd-input), pemanggilan window.which_element_is_the_mouse_on()akan secara fungsional setara dengan$("#wmd-input")
Jawaban:
Ada fungsi document.elementFromPointyang sangat keren yang disebut berfungsi seperti apa.
Yang kita butuhkan adalah menemukan x dan y coord dari mouse dan kemudian memanggilnya menggunakan nilai tersebut:
var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);event.targetatau apa pun
event.target?
eventitu, dan bagaimana hal itu terjadi
Di browser yang lebih baru, Anda dapat melakukan hal berikut:
document.querySelectorAll( ":hover" );Itu akan memberi Anda NodeList item yang mouse saat ini berada dalam urutan dokumen. Elemen terakhir di NodeList adalah yang paling spesifik, setiap elemen sebelumnya haruslah orang tua, kakek nenek, dan seterusnya.
<li>saat di atas <li>elemen lainnya .
$(':hover')tetapi pada dasarnya sama: jsfiddle.net/pmrotule/2pks4tf6
(function(){ var q = document.querySelectorAll(":hover"); return q[q.length-1]; })()
mousemovemungkin merusak kinerja
Meskipun pertanyaan berikut mungkin tidak benar-benar menjawab pertanyaan, karena ini adalah hasil pertama dari googling (googler mungkin tidak menanyakan pertanyaan yang persis sama :), harap ini akan memberikan masukan tambahan.
Sebenarnya ada dua pendekatan berbeda untuk mendapatkan daftar semua elemen yang mouse saat ini berakhir (untuk browser yang lebih baru, mungkin):
Seperti dalam jawaban dherman, seseorang dapat menelepon
var elements = document.querySelectorAll(':hover');Namun, ini mengasumsikan bahwa hanya anak-anak yang akan menghamparkan leluhur mereka, yang biasanya terjadi, tetapi tidak benar secara umum, terutama ketika berhadapan dengan SVG di mana elemen di cabang berbeda dari pohon DOM mungkin saling tumpang tindih.
Metode ini digunakan document.elementFromPoint(x, y)untuk menemukan elemen paling atas, menyembunyikannya untuk sementara (karena kami segera memulihkannya dalam konteks yang sama, browser tidak akan benar-benar merendernya), lalu lanjutkan untuk menemukan elemen teratas kedua ... Terlihat sedikit hacky, tetapi ia mengembalikan apa yang Anda harapkan saat ada, misalnya, elemen saudara dalam pohon saling menutupi satu sama lain. Silakan temukan posting ini untuk lebih jelasnya,
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;
}Cobalah keduanya, dan periksa hasil yang berbeda.
Document.elementsFromPoint(x, y) stackoverflow.com/a/31805883/1059828
elementFromPoint()hanya mendapatkan elemen pertama di pohon DOM. Ini sebagian besar TIDAK cukup untuk kebutuhan pengembang. Untuk mendapatkan lebih dari satu elemen pada misalnya posisi penunjuk mouse saat ini, inilah fungsi yang Anda butuhkan:
document.elementsFromPoint(x, y) . // mind the 's' in elementsIni mengembalikan larik semua objek elemen di bawah titik yang diberikan. Cukup berikan nilai X dan Y mouse ke fungsi ini.
Info lebih lanjut di sini: https://developer.mozilla.org/en-US/docs/Web/API/document/elementsFromPoint
Untuk browser yang sangat lama yang tidak didukung, Anda dapat menggunakan jawaban ini sebagai fallback.
Arahkan kursor ke gelembung acara, sehingga Anda dapat meletakkan satu pendengar di badan dan menunggu sampai mereka menggelembung, lalu ambil event.targetatau 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).
Kode berikut akan membantu Anda mendapatkan elemen penunjuk mouse. Elemen yang dihasilkan akan ditampilkan di konsol.
document.addEventListener('mousemove', function(e) {
console.log(document.elementFromPoint(e.pageX, e.pageY));
})e.clientXdan e.clientYsebagai gantinya (diuji di Firefox 59).
Anda dapat melihat target mouseoveracara pada beberapa leluhur yang sesuai:
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 Gerakkan mouse Anda di jendela cuplikan: D
<script>
document.addEventListener('mouseover', function (e) {
console.log ("You are in ",e.target.tagName);
});
</script>Target mousemoveacara DOM adalah elemen DOM paling atas di bawah kursor saat mouse bergerak:
(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;
}
});
})();Ini mirip dengan solusi @Philip Walton, tetapi tidak memerlukan jQuery atau setInterval.
Anda dapat menggunakan selektor ini untuk merusak objek dan kemudian memanipulasinya sebagai objek jquery. $(':hover').last();
Izinkan saya memulai dengan mengatakan bahwa saya tidak merekomendasikan penggunaan metode yang akan saya sarankan. Ini jauh lebih baik untuk penggunaan event driven pengembangan dan mengikat peristiwa hanya untuk elemen Anda tertarik untuk mengetahui apakah atau tidak mouse di atas dengan mouseover, mouseout, mouseenter, mouseleave, dll
Jika Anda benar-benar HARUS memiliki kemampuan untuk mengetahui elemen mana yang dilewati mouse, Anda perlu menulis fungsi yang mengikat mouseoveracara ke semua yang ada di DOM, lalu menyimpan apa pun elemen saat ini di beberapa variabel.
Anda bisa melakukan sesuatu seperti ini:
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);
}
}());Pada dasarnya, saya telah membuat fungsi langsung yang menyetel acara di semua elemen dan menyimpan elemen saat ini di dalam closure untuk meminimalkan footprint Anda.
Berikut adalah demo yang berfungsi window.which_element_is_the_mouse_on setiap detik dan mencatat elemen apa yang mouse saat ini ke konsol.
Pertanyaan lama tapi inilah solusi bagi mereka yang mungkin masih berjuang. Anda ingin menambahkan mouseoveracara pada elemen 'induk' dari elemen anak yang ingin Anda deteksi. Kode di bawah ini menunjukkan kepada Anda bagaimana melakukannya.
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)
});