Deskripsi masalah
Saya berharap bahwa ketika mouse pindah ke ID1, ID2 akan ditampilkan, dan ketika mouse meninggalkan ID1, ID2 akan ditampilkan. Pertanyaannya adalah sebagai berikut:
1. Saat mouse bergerak dari ID1 ke ID2, ID berubah dari tampilan menjadi tidak ditampilkan, dan kemudian berubah ke tampilan
2. Saat mouse bergerak dari ID2 ke ID1, tampilan ID2 menjadi non-display, dan kemudian menjadi tampilan
Yang saya inginkan adalah ketika mouse bergerak pada ID1 atau ID2, ID2 akan terus muncul tanpa berubah.
<type script = "Text/JavaScript" src = "https://code.jquery.com/jquery-1.12.4.js"> </script> <div id = "id1"> <div id = "id2"> </div> </div> <skrip type = "text/javascript"> $ ("#id1"). mouseOver (function () {$ (this) .children (). fadein (1000);}). mouseout (function () {$ (this) .children (). fadeout (1000);}); </skrip>Solusi masalah
Analisis masalah awal adalah bahwa ketika mouse pindah dari ID1 ke ID2, mouse pergi dari ID2 ke ID1, dan acara mouseout dipicu untuk ID1, sehingga tampilan ID2 menjadi non-display. Kemudian mouse pindah ke ID2, dan acara mouseover dipicu pada ID2. Karena mekanisme gelembung, sebelum mouseover pada ID2 menggelegak ke ID1, acara mouseover pada ID1 dipicu, dan kemudian ID2 berubah dari non-display untuk ditampilkan. Demikian pula, ketika mouse bergerak dari ID2 ke ID1, acara mouseout dipicu untuk ID2. Atau karena mekanisme gelembung yang ditransmisikan oleh acara mouseout ke ID1, dan ID2 berubah dari layar ke non-display. Kemudian sebelum mouse pindah ke ID1, acara mouseover dipicu, dan kemudian ID2 tidak ditampilkan untuk ditampilkan.
Tampaknya masalah di atas perlu diselesaikan dengan memblokir mouse keluar dari ID1 ketika mouse bergerak dari ID1 ke ID2; Ketika mouse bergerak dari ID2 ke ID1, menghalangi mouse dari ID2 dari ID2 ke ID1, mencegah mouse keluar dari ID2 dari menggelegak di atas ID1. Maka masalahnya tidak dapat diselesaikan hanya dengan mencegah gelembung.
Untuk menyelesaikan masalah seperti itu, jQuery menyediakan metode mouseenter dan mouseleave. Jadi kode JS diubah menjadi berikut, yang memecahkan masalah dengan sangat baik.
$ ("#id1"). MouseEnter (function () {$ (this) .children (). Fadein (1000);}). Mouseleave (function () {$ (this) .children (). fadeout (1000);});Banyak tempat memperkenalkan Mouseenter, Mouseleave, Mouseover, dan Mouseout, jadi saya menyalin dan menempelkannya.
/**************************************************/
1. Mouseover dan Mouseenter
Acara mouseover dipicu terlepas dari apakah pointer mouse melewati elemen yang dipilih atau elemen anaknya.
Acara Mouseenter hanya akan dipicu ketika penunjuk mouse melewati elemen yang dipilih.
2.Mouseout dan mouseleave
Acara mouseout akan dipicu terlepas dari apakah penunjuk mouse meninggalkan elemen yang dipilih atau elemen anak apa pun.
Peristiwa mouseleave hanya akan dipicu ketika penunjuk mouse meninggalkan elemen yang dipilih.
/**************************************************/
Fenomena ini memang fenomena ini, tetapi prosesnya agak kabur. Pemahaman saya adalah sebagai berikut:
Ketika pointer mouse bergerak ke elemen yang dipilih, acara mouseover akan dipicu. Semua orang tahu bahwa ketika penunjuk mouse bergerak dari elemen yang dipilih ke elemen anaknya, acara mouseout dari elemen yang dipilih akan dipicu terlebih dahulu, dan kemudian peristiwa mouseover dari elemen anak akan digelembungkan ke elemen yang dipilih. Pada saat ini, itu setara dengan elemen yang dipilih terlebih dahulu melaksanakan acara mouseout dan kemudian menjalankan acara mouseover.
Untuk verifikasi, ubah kode ke yang berikut
<type script = "Text/JavaScript" src = "https://code.jquery.com/jquery-1.12.4.js"> </script> <div id = "id1"> <div id = "id2"> </div> </div> <skrip type = "text/javascript"> $ ("#id1"). mouseOver (function () {// $ (this) .children (). fadein (1000); console.log ('a');}). <function (function () {// $ (this) .Children ()Pindahkan mouse dari halaman ke ID1, lalu pindah dari ID1 ke ID2, output konsol adalah sebagai berikut
Dapat dilihat bahwa ID1 telah disebut peristiwa mouseover, mouseout, dan mouseover, yang persis sama dengan yang dianalisis di atas.
Analisis Implementasi Mouseenter dan Mouseleave
Analisis prinsip
Dari analisis di atas, kita dapat melihat bahwa untuk mencapai efek mouseenter dan mouseleave, ketika mouse bergerak dari elemen yang dipilih ke elemen anaknya, elemen yang dipilih tidak menjalankan peristiwa mouseout, juga tidak menjalankan peristiwa mouseover bahwa subkelas menggelembung. Ketika mouse bergerak dari elemen elemen anak yang dipilih ke elemen yang dipilih, elemen yang dipilih tidak menjalankan acara mouseover, juga tidak menjalankan peristiwa mouseout bahwa subkelas gelembung.
Untuk mencapai efek di atas, kita memerlukan Atribut Terkait Target dari Objek Acara, yang digunakan untuk menilai atribut node terkait dari node target mouseover dan mouseout. Sederhananya, ketika peristiwa mouseover dipicu, atribut yang terkait dengan node yang baru saja ditinggalkan mouse, dan ketika peristiwa mouseout dipicu, itu mewakili objek yang dipindahkan oleh mouse. Karena MSIE tidak mendukung properti ini, ia telah menggantikan properti, yaitu elemen dan elang. Selain itu, kami juga memerlukan metode berisi untuk menentukan apakah suatu objek terkandung dalam objek lain.
Dengan cara ini, saat mouse bergerak, Anda perlu menilai dua berikut
1. Hubungi mouseover, Anda hanya perlu menentukan apakah target terkait adalah elemen anak dari elemen yang dipilih. Jika demikian, itu tidak akan dieksekusi (saat pindah dari elemen elemen anak yang dipilih ke elemen yang dipilih, mouseover tidak akan dieksekusi; saat pindah dari elemen yang dipilih ke elemen elemen anak yang dipilih, mouseover yang menggelegak tidak akan dieksekusi);
2. Hubungi mouseout, Anda hanya perlu menentukan apakah elemen anak dari target terkait dipilih. Jika demikian, itu tidak akan dieksekusi (saat pindah dari elemen elemen anak yang dipilih ke elemen yang dipilih, mouseout yang digelembungkan dari elemen anak tidak dieksekusi; saat pindah dari elemen yang dipilih ke elemen elemen anak yang dipilih, mouseover tidak dieksekusi);
Proses implementasi
Tentukan apakah ada hubungan inklusi antara dua elemen
Fungsi berisi dienkapsulasi dalam jQuery sebagai berikut
Itu bisa disederhanakan sebagai berikut
// menilai apakah keduanya berisi fungsi berisi (a, b) {return a.contains? a! = b && a.contains (b): !! (a.comparedocumentposition (b) & 16);}Pengantar BandingOKSUMENTPOSISI
Metode ini adalah bagian dari spesifikasi DOM Level 3, memungkinkan Anda untuk menentukan posisi timbal balik antara 2 node DOM. Metode ini lebih kuat dari .contains (). Salah satu aplikasi yang mungkin dari metode ini adalah mengurutkan node dom menjadi urutan yang terperinci dan tepat. Informasi yang dikembalikan oleh nodea.
Arti bit bit
Melalui hal di atas kita dapat memahami mengapa kita harus menulisnya sebagai A.ComparedocumentPosition (b) & 16 karena jika simpul A berisi simpul B, 16 akan dikembalikan, 16 & 16 = 1 akan dikembalikan, dan hasilnya akan 0 dalam kasus lain.
Dapatkan Target Terkait untuk Kompatibilitas
Agar kompatibel dengan berbagai browser, lihat kode sumber jQuery, tulis kode berikut untuk mendapatkan Atribut terkait target dari node target mouseover dan mouseout.
fungsi getrelated (e) {var terkait; var type = e.type.tolowercase (); // Dapatkan nama acara di sini jika (type == 'mouseOver') {terkait = e.relatedTarget || e.FromElement} lain jika (type = 'mouseout') {terkait = e.relatedTarget || e.toelement} retriced; }Tingkatkan mouseover dan mouseout
Tingkatkan mouseover dan mouseout untuk mencapai peningkatan efek mouseenter dan mouseleave, semua kode adalah sebagai berikut.
<! Doctype html> <html> <head> <itement> </itement> </head> <body> <v id = "id1"> <div id = "id2"> </div> </div> <script type = "text/javaScript" src = "https://code.jquery.com/jQuery-1.14. type = "text/javascript"> // menilai apakah dua A berisi bfunction berisi (a, b) {return a.contains? A! = B && a.contains (b): !! (a.comparedocumentposition (b) & 16);} function getrelated (e) {var terkait; var type = e.type.tolowercase (); // Dapatkan nama acara di sini jika (type == 'mouseover') {terkait = e.relatedTarget | e.fromelement unggul} Lain} if (type = 'mouseout') {terkait = e.relatedTarget || e.toElement} return terkait; }$(function(){$("#id1").mouseover(function(e){//Defend where the mouse moves to id1 var related=getRelated(e); //If related is the child element id2 of id1, that is, it moves from child element id2 to id1, or it is related to id1, that is, it moves from id1 to its child element id2, then no operation is performed, otherwise the corresponding operation is performed if(this!=related && !contains(this, related)){console.log('mouseover');}}).mouseout(function(e){//Judge where the mouse should move from id1? var related=getRelated(e); //If related is id1, that is, when id1 moves from its child element to id1, or it is related to id2, that is, it moves from id1 to its child element, no Operasi dilakukan, jika tidak, operasi yang sesuai dilakukan jika (ini! = Terkait &&! Berisi (ini, terkait)) {console.log ('mouseout');}});}); </script> </body> </html>Tes, rute gerakan mouse seperti yang ditunjukkan pada diagram berikut
Seperti yang dapat dilihat dari konsol, mouseover dan mouseout pada saat ini memiliki efek mouseenter dan mouseleave yang lengkap.
Enkapsulasi kode
Jika Anda perlu memuat jQuery atau menulis banyak perwakilan setiap kali Anda melakukan operasi seperti itu, itu akan menjadi tugas yang membosankan. Untuk memfasilitasi operasi di masa depan, kemasan yang tepat dilakukan, disimulasikan jQuery, dan menghasilkan mouseenter dan mouseleave Anda sendiri. Kode ini dienkapsulasi ke dalam file dqmouse.js, sebagai berikut:
(function (w) {var dqmouse = function (obj) {// function body return dqmouse.fn.init (obj) baru baru dqmouse.fn = dqmouse.prototype = {// objek prototipe yang diperluas obj: null, dqmouse: "1.0.0", init: init: function (function) {null, null, dqmouse: "1.0.0", init: init: init: init (function) {null, null, dqmouse: "1.0.0", init: init: init: init: init: init (function (this. ini;}, berisi: function (a, b) {return a.contains? if (type == 'mouseover') {terkait = E.relatedTarget || e.FromElement} lain jika (type = 'mouseout') {terkait = e.relatedTarget || e.toElement} Return terkait; if (this! = terkait &&! _self.contains (this, terkait)) {fn ();}} return _self;}, out: function (fn) {var obj = this.obj; var _self = this; obj.onmouseout = function (e) {var terkait = _ -getrelated (e); terkait)) {fn ();}} return _self;}} dqmouse.fn.init.prototype = dqmouse.fn; window.dqmouse = window. $$ = dqmouse;}) (window);File sumber yang dipanggil adalah sebagai berikut:
<Div id = "id1"> <div id = "id2"> </div> </div> <script type = "text/javascript" src = "dqmouse.js"> </script> <script type = "text/javascript"> var id1 = document.getElementById ('id1'); $$ (id1) .Over (function () {console.log ('mouseOver');}). out (function () {console.log ('mouseout');}); </script>Di atas adalah konten yang relevan tentang cara memecahkan masalah mouseover dan mouse yang memicu beberapa kali dalam JS yang diperkenalkan oleh editor kepada Anda. Saya harap ini akan membantu semua orang!