Berbicara tentang memiliki elemen DIV, ada elemen IMG dan elemen SPAN di dalamnya, jangan khawatir bagaimana kedua elemen internal ini ditata ini, ini bukan poin yang ingin saya bahas.
Untuk mencapai beberapa efek khusus, saya perlu menggunakan acara onmouseover dan onmouseout TD, dan ketika saya mengujinya, saya akan menemukan situasi berikut:
Saat mouse bergerak di dalam DIV, peristiwa onmouseover dipicu; Kemudian pindahkan mouse ke elemen IMG atau SPAN di dalam DIV, kami pasti tidak berpikir bahwa mouse telah bergerak ke luar DIV, tetapi anehnya adalah peristiwa onmouseout dipicu, dan peristiwa onmouseover juga langsung dipicu.
Ini bukan yang saya inginkan, jadi bagaimana saya bisa "memblokir" gangguan peristiwa Javascrip{filtering}t yang dibawa oleh elemen internal ke elemen eksternal?
Berikut adalah dua metode:
1. setTimeout
Karena setelah mouse bergerak di atas elemen dalam dan memicu peristiwa onmouseout dari elemen luar, onmouseover elemen luar juga akan segera dipicu, jadi kita hanya perlu menunda tindakan yang perlu dieksekusi oleh peristiwa onmouseout dari elemen luar untuk jangka waktu yang singkat untuk berjalan, dan kemudian menjalankan metode clearTimeout dalam peristiwa onmouseover, untuk menghindari interferensi peristiwa yang disebabkan oleh elemen internal.
Silakan lihat gambar berikut untuk proses eksekusi tertentu (garis putus-putus vertikal mewakili waktu):
Ini adalah pendekatan yang cerdas, karena ketika onmouseout dipicu, metode substantif tidak segera dieksekusi, tetapi menunggu untuk waktu yang singkat. Jika peristiwa onmouseover segera dipicu selama waktu ini, maka pada dasarnya pasti bahwa peristiwa onmouseout dipicu karena gangguan dari elemen internal, jadi gunakan clearTimeout dalam peristiwa onmouseover untuk mencegah metode tertunda dieksekusi.
2. Berisi
Buat penilaian berikut saat onmouseover, lalu jalankan isi metode ketika hasilnya benar:
Buat penilaian berikut saat onmouseout, lalu jalankan isi metode ketika hasilnya benar:
Berikut penjelasan mengenai arti dari dua baris kode di atas:
Di IE, semua elemen HTML memiliki metode contain yang menentukan apakah elemen saat ini berisi elemen tertentu. Kami menggunakan metode ini untuk menentukan apakah peristiwa elemen luar dipicu oleh elemen internal, dan jika elemen internal menyebabkan peristiwa yang tidak diinginkan dipicu, maka kami mengabaikan peristiwa ini.
event.fromElement menunjuk ke elemen tempat mouse keluar saat peristiwa onmouseover dan onmouseout dipicu; event.toElement menunjuk ke elemen yang dimasukkan mouse saat peristiwa onmouseover dan onmouseout dipicu.
Jadi arti dari dua baris kode di atas adalah:
- Ketika peristiwa onmouseover dipicu, itu menentukan apakah elemen yang ditinggalkan oleh mouse adalah elemen internal dari elemen saat ini, dan jika demikian, mengabaikan peristiwa ini;
- Saat peristiwa onmouseout dipicu, nilai apakah elemen yang dimasukkan oleh mouse adalah elemen internal dari elemen saat ini, dan jika demikian, abaikan peristiwa ini;
Dengan cara ini, elemen dalam tidak mengganggu peristiwa onmouseover dan onmouseout dari elemen luar.
Tetapi masalahnya sekali lagi, browser non-IE tidak mendukung fungsi contain, tetapi sekarang setelah kita mengetahui fungsi contain, kita dapat menambahkan kode berikut untuk menambahkan kode berikut untuk menambahkan dukungan contain untuk browser non-IE:
Metode di atas tidak kompatibel dengan Firefox:
Intinya adalah jQuery:
jQueryGunakan mouseleave alih-alih mouseout, agar apa yang dikatakan di atas tidak terjadi.
Selain itu, mouseover akan dipicu berulang kali, cukup gunakan mouseenter sebagai gantinya.
Solusi sempurna~
|
Diposting pada 17/12/2018 14.57.53
|
|
|
|
