Saya telah terpapar dengan acara Onmouseover dan acara Onmouseout dalam dua hari terakhir. Saya selalu berpikir bahwa mereka hanya memicu peristiwa ketika penunjuk mouse pindah ke elemen dan memicu peristiwa ketika penunjuk mouse bergerak keluar dari objek yang ditentukan. Tetapi tiba -tiba saya menemukan bahwa ini hanyalah deskripsi sederhana dari mereka. Bagaimanapun, mari kita lihat mereka bersama -sama, mereka masih memiliki fitur aneh. Apakah itu baik atau buruk?
Pertama -tama mengimplementasikan kotak:
Bind The Onmouseover Event dan Onmouseout Event di kotak ini
Temukan bahwa tidak ada yang akan terjadi pada mereka, dan kemudian (hehe, Anda tahu!)
Mari kita buat elemen B, sehingga bersarang di elemen A sebagai elemen anak dari a
Kami masih hanya mengikat acara Onmouseover dan acara Onmouseout ke elemen induk luar A. Apa yang akan Anda temukan? Ya, itu benar! Ketika mouse bergerak masuk dan menghilangkan elemen anak B dari A, acara Onmouseover dan acara Onmouseout juga terjadi! Lai Mengapa? Ini bukan yang saya inginkan! Apakah B bukan bagian dari A saat ini? Tentu saja tidak, jika tidak, acara Onmouseover tidak akan terjadi ketika elemen B dipindahkan. Ini membuktikan bahwa elemen B masih merupakan bagian integral dari A.
Lalu apa yang terjadi? Lagi pula, insiden itu membuat kesalahan? Semua orang tahu bahwa ada dua jenis aliran acara di browser yang umum digunakan: gelembung acara dan event capture. Mari kita lihat definisi gelembung peristiwa: acara disebarkan langkah demi langkah dari target acara yang paling spesifik ke target acara paling tidak spesifik (objek dokumen). Jadi ketika mouse bergerak masuk dan menghapus Acara Anak B, acara Onmouseover B dan acara Onmouseout akan dipicu, tetapi tidak memiliki dua peristiwa ini, jadi ia melewati dua peristiwa ini ke elemen induknya A. A memiliki dua peristiwa ini, sehingga situasi yang kita lihat terjadi.
Beberapa orang akan mengatakan bagaimana menghindarinya. Lagi pula, tidak semua orang memiliki permintaan semacam ini. Kami hanya membutuhkan acara elemen induk untuk memicu, dan membiarkan elemen anak diam -diam menjadi pria yang tampan.
Jadi W3C menambahkan atribut Target Terkait di acara Mouseover dan Mouseout:
• Dalam acara mouseover, ini menunjukkan elemen mana mouse berasal
• Dalam acara mouseout, itu menunjuk ke elemen yang ditulis oleh mouse
Namun, Microsoft telah menambahkan dua atribut ke acara mouseover dan mouseout
• Fromelement, dalam acara mouseover, menunjukkan elemen mana mouse berasal
• Toelement, elemen yang menunjuk ke mouse di acara mouseout
Jadi kami memiliki implementasi kode berikut
document.geteLementById ('box1'). onmouseover = function (e) {if (! e) e = window.event; var reltg = e.relatedTarget? E.RelatedTarget: E.FromElement; while (reltg && reltg! = this) reltg = reltg.parentnode; if (reltg! = this) {// di sini Anda dapat menulis kode pemrosesan untuk window event.ev ('111'); ever {eF vaREnte (e) {E) {E); Reltg = E.RelatedTarget? E.RelatedTarget: e.toElement; while (reltg && reltg! = this) reltg = reltg.parentnode; if (reltg! = this) {// di sini Anda dapat menulis OnMouseLeave Event Processing Code Alert ('2222');}}Di atas adalah pemahaman komprehensif tentang insiden Onmouseover dan insiden Onmouseout yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!