Penjelasan terperinci tentang penggunaan mouseover dan mouseout dalam kemahiran javascript_javascript

Artikel ini tidak benar-benar menghalang elemen kanak-kanak elemen acara daripada menggelegak...

Ia hanya membuat pertimbangan apabila elemen kanak-kanak menggelembung ke elemen acara untuk menentukan sama ada acara itu harus dicetuskan, oh...tidak, ia sepatutnya sama ada untuk menjalankan operasi yang berkaitan dalam fungsi acara...

Pertama sekali, anda boleh klik di sini: Berlakunya masalah

Nota: Acara alih tetikus/keluar dalam jquery juga mempunyai masalah ini

Penyelesaian 1:

Di bawah IE, terdapat acara mouseenter dan mouseleave untuk menggantikan mouseover dan mouseout.

Terdapat banyak pendapat di Internet bahawa kedua-dua acara ini hanya disokong oleh IE dan bukan pelayar lain.

Tetapi versi terkini Firefox dan Google menyokong mouseenter dan mouseleave! ! ! ! !

Selain itu, julat sokongan IE ialah: [ie5, jadi kita tidak sepatutnya menyembur IE...

Diuji dengan penyemak imbas lain:

Mouseenter dan mouseleave tidak disokong dalam Firefox/3.6.28 versi Firefox mana yang akan menyokong kedua-dua acara ini...

Ia tidak disokong dalam Opera9.50 Alpha dan Opera9.00 Beta. Malah, tidak perlu menguji Opera sekarang Versi terkini Opera adalah berdasarkan kernel webkit...

Versi rendah Google belum diuji...

Sudah tentu, versi lama penyemak imbas ini pada dasarnya boleh diabaikan, jadi ini sepatutnya menjadi penyelesaian terbaik: gunakan acara mouseenter dan mouseleave untuk menggantikan mouseover dan mouseout.

Untuk contoh dua acara ini, klik di sini: mouseenter dan mouseleave

Nota: jquery juga mempunyai acara mouseenter dan mouseleave, yang serasi dengan semua penyemak imbas.

Penyelesaian 2:

Kaedah di atas tidak disokong oleh versi lama Firefox dan Google Jika anda mahukan julat keserasian yang terbaik, anda boleh terus membaca di bawah

Kami menggunakan var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? Kemudian gunakan perhubungan antara elemen berkaitan peristiwa ini dan elemen peristiwa (perhubungan yang disertakan) untuk menentukan sama ada hendak melaksanakan pemprosesan acara berkaitan.

Untuk acara keluar tetikus, reltg ialah nod yang dimasuki penuding tetikus apabila ia meninggalkan sasaran.

Untuk acara alih tetikus, reltg ialah nod yang ditinggalkan oleh penunjuk tetikus apabila ia bergerak ke nod sasaran.

Dalam fungsi acara tetikus li, jika reltg ialah elemen anak li, kami tidak perlu menjalankan operasi yang berkaitan Jika reltg ialah elemen induk li, kami akan menjalankan operasi yang berkaitan.

Kita boleh menilai hubungan kemasukan antara li dan reltg melalui fungsi isMouseLeaveOrEnter berikut:

//判断事件相关元素与li的关系 如果事件相关元素为li的子元素就返回false 反之返回true
function isMouseLeaveOrEnter(e, handler) { 
　　if (e.type != 'mouseout' && e.type != 'mouseover') return false; 
　　var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
　　while (reltg && reltg != handler) reltg = reltg.parentNode;
　　return (reltg != handler);
};

Li.onmouseout = function(e) {
　　e = e||window.event;
　　if (isMouseLeaveOrEnter(e,this)) {
　　　　//运行相关操作
　　};
}

Kelemahan jelas kaedah ini ialah semua elemen induk mesti dilalui dalam isMouseLeaveOrEnter, yang merupakan isu prestasi

Penyelesaian tiga:

Kaedah ini mempunyai idea yang sama seperti kaedah dua, kecuali kami menggunakan compareDocumentPosition/contains untuk menentukan hubungan pembendungan antara li dan reltg, yang mengoptimumkan isu prestasi yang disebabkan oleh merentasi semua elemen induk dalam kaedah dua.

Mari lihat kod secara langsung:

//判断node是否为parent的子元素
//if node == parent 也会返回true
function contains(parent, node) {
　　if(parent.compareDocumentPosition){ //ff
　　　　var _flag = parent.compareDocumentPosition(node); 
　　　　return (_flag == 20 || _flag == 0)? true : false; 
　　}else if(parent.contains){ //ie
　　　　return parent.contains(node);
　　}
};

Li.onmouseout = function(e) {
　　e = e||window.event;
　　var relatedEle = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement
　　if (!contains(this, relatedEle)) {
　　　　show.innerHTML=show.innerHTML+'0';
　　}

}

Kaedah

compareDocumentPosition() membandingkan dua nod dan mengembalikan integer yang menerangkan kedudukan mereka dalam dokumen.

Nilai pulangan mungkin:

1: Tidak mengapa, kedua-dua nod itu bukan milik dokumen yang sama.

2: Nod pertama (P1) terletak di belakang nod kedua (P2).

4: Nod pertama (P1) diletakkan di hadapan nod kedua (P2).

8: Nod pertama (P1) terletak dalam nod kedua (P2).

16: Nod kedua (P2) terletak dalam nod pertama (P1).

32: Tiada perhubungan, atau kedua-dua nod ialah dua atribut bagi elemen yang sama.

Nota: Nilai pulangan boleh menjadi gabungan nilai. Sebagai contoh, mengembalikan 20 bermakna p2 berada di dalam p1 (16), dan p1 sebelum p2 (4).

Dan [iaitu8- tidak menyokong kaedah compareDocumentPosition() yang anda perlu gunakan mengandungi sebaliknya kaedah compareDocumentPosition() digunakan untuk menentukan sama ada nodeB disertakan dalam nodeA.contains( nodeB )

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.