Bagaimana cara menonaktifkan peristiwa mouseout yang dipicu oleh elemen anak?

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() } );

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 mouseenterdan mouseleaveperistiwa daripada mouseoverdan mouseout.

Anda dapat menguji perilakunya dengan cepat dengan:

$(".myClass").on( {
   'mouseenter':function() { console.log("enter"); },
   'mouseleave':function() { console.log("leave"); }
});

Demi kesederhanaan, saya hanya akan mengatur ulang html sedikit untuk meletakkan konten yang baru ditampilkan di dalam elemen yang terikat pada peristiwa gerakan mouse:

<div id="hoverable">
  <a>Hover Me</a>
  <div style="display:none;">
    <input>Test</input>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>
</div>

Kemudian, Anda dapat melakukan sesuatu seperti ini:

$('#hoverable').hover( function() { $(this).find("div").show(); },
                       function() { $(this).find("div").hide(); } );

Catatan: Saya tidak merekomendasikan inline css, tapi itu dilakukan untuk membuat contoh lebih mudah dicerna.

Ya, teman-teman, gunakan .mouseleavesebagai pengganti .mouseout:

$('div.sort-selector').mouseleave(function() {
    $(this).hide();
});

Atau bahkan gunakan dengan kombinasi live:

$('div.sort-selector').live('mouseleave', function() {
    $(this).hide();
});

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.

Saya hanya memeriksa apakah koordinat mouse berada di luar elemen dalam peristiwa mouseout.

Ini berfungsi tetapi banyak kode untuk hal yang sesederhana itu :(

function mouseOut(e)
{
    var pos = GetMousePositionInElement(e, element);
    if (pos.x < 0 || pos.x >= element.size.X || pos.y < 0 || pos.y >= element.size.Y)
    {
        RealMouseOut();
    }
    else
    {
         //Hit a child-element
    }
}

Kode dipotong agar mudah dibaca, tidak akan berfungsi di luar kotak.

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.

Saya menyelesaikan masalah ini dengan menambahkan pointer-events: none;elemen anak saya css

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.

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 menggunakan mouseleave, acara tidak dipicu saat mouse melewati elemen anak, dan ini adalah perilaku yang ingin dicapai OP.