Izinkan saya menjelaskan masalah secara rinci:
Saya ingin menampilkan div posisi absolut saat mengarahkan kursor ke elemen. Itu sangat sederhana dengan jQuery dan berfungsi dengan baik. Tapi ketika mouse melewati salah satu elemen anak, itu memicu kejadian mouseout dari div yang memuat. Bagaimana cara menjaga javascript agar tidak memicu kejadian mouseout dari elemen yang mengandung saat mengarahkan sebuah elemen anak.
Apa cara terbaik dan terpendek untuk melakukannya dengan jQuery?
Berikut adalah contoh sederhana untuk menggambarkan apa yang saya maksud:
Html:
<a>Hover Me</a>
<div>
<input>Test</input>
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
Javascript / jQuery:
$('a').hover( function() { $(this).next().show() }
function() { $(this).next().hide() } );
javascript
jquery
events
Sander Versluys
sumber
sumber
Jawaban:
Pertanyaannya agak lama, tapi saya bertemu dengan ini beberapa hari yang lalu.
Cara paling mudah untuk melakukan hal ini dengan versi terbaru dari jQuery adalah dengan menggunakan
mouseenter
danmouseleave
peristiwa daripadamouseover
danmouseout
.Anda dapat menguji perilakunya dengan cepat dengan:
sumber
ROLL_OVER
danROLL_OUT
di AS3.mouseout
, padahal sebenarnya masih di dalam elemen induk.Demi kesederhanaan, saya hanya akan mengatur ulang html sedikit untuk meletakkan konten yang baru ditampilkan di dalam elemen yang terikat pada peristiwa gerakan mouse:
Kemudian, Anda dapat melakukan sesuatu seperti ini:
Catatan: Saya tidak merekomendasikan inline css, tapi itu dilakukan untuk membuat contoh lebih mudah dicerna.
sumber
Ya, teman-teman, gunakan
.mouseleave
sebagai pengganti.mouseout
:Atau bahkan gunakan dengan kombinasi
live
:sumber
Anda mencari jQuery yang setara dengan peristiwa pencegahan javascript yang menggelegak.
Lihat ini:
http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29
Pada dasarnya Anda perlu menangkap kejadian di simpul DOM turunan, dan di sana menghentikan penyebarannya ke pohon DOM. Cara lain, meskipun sebenarnya tidak disarankan (karena dapat sangat mengacaukan peristiwa yang ada di halaman Anda), adalah dengan menyetel pengambilan peristiwa ke elemen tertentu di halaman, dan itu akan menerima semua peristiwa. Ini berguna untuk perilaku DnD dan semacamnya, tetapi jelas tidak untuk kasus Anda.
sumber
Saya hanya memeriksa apakah koordinat mouse berada di luar elemen dalam peristiwa mouseout.
Ini berfungsi tetapi banyak kode untuk hal yang sesederhana itu :(
Kode dipotong agar mudah dibaca, tidak akan berfungsi di luar kotak.
sumber
Saya setuju dengan Ryan.
Masalah Anda adalah bahwa div "berikutnya" bukanlah "anak" dari A. Tidak ada cara bagi HTML atau jQuery untuk mengetahui bahwa elemen "a" Anda terkait dengan div turunan di DOM. Membungkusnya dan mengarahkan kursor ke pembungkus berarti mereka terkait.
Harap perhatikan bahwa kodenya tidak sejalan dengan praktik terbaik. Jangan setel gaya tersembunyi sebaris pada elemen; jika pengguna memiliki CSS tetapi bukan javascript, elemen tersebut akan bersembunyi dan tidak akan dapat ditampilkan. Praktik yang lebih baik adalah meletakkan deklarasi itu di acara document.ready.
sumber
Saya menyelesaikan masalah ini dengan menambahkan
pointer-events: none;
elemen anak saya csssumber
Cara saya biasanya melihat ini ditangani adalah memiliki jeda sekitar 1/2 detik antara memindahkan mouse dari elemen HoverMe. Saat menggerakkan mouse ke elemen yang di-hover, Anda ingin menyetel beberapa variabel yang menandakan bahwa Anda sedang mengarahkan kursor ke elemen, dan kemudian pada dasarnya menghentikan bagian yang di-hover dari persembunyian jika variabel ini disetel. Anda kemudian harus menambahkan fungsi sembunyi OnMouseOut yang serupa dari elemen yang di-hover untuk membuatnya menghilang saat Anda melepas mouse. Maaf, saya tidak bisa memberikan kode apa pun, atau sesuatu yang lebih konkret, tapi saya harap ini mengarahkan Anda ke arah yang benar.
sumber
Ini pertanyaan lama, tapi tidak pernah menjadi usang. Jawaban yang benar haruslah yang diberikan oleh bytebrite .
Saya hanya ingin menunjukkan perbedaan antara gerakan mouse / mouseout dan mouseenter / mouseleave. Anda dapat membaca penjelasan yang bagus dan bermanfaat di sini (pergi ke bagian paling bawah halaman untuk demo yang berfungsi). Saat Anda menggunakan
mouseout
, peristiwa berhenti saat mouse memasuki elemen lain, meskipun itu adalah elemen anak. Di sisi lain, saat Anda menggunakanmouseleave
, acara tidak dipicu saat mouse melewati elemen anak, dan ini adalah perilaku yang ingin dicapai OP.sumber