Rumah hujung hadapan web Soal Jawab bahagian hadapan Bagaimana untuk membatalkan acara hover dalam jquery

Bagaimana untuk membatalkan acara hover dalam jquery

Apr 06, 2023 am 09:11 AM

jQuery ialah perpustakaan JavaScript yang sangat popular Ia menyediakan banyak fungsi dan kaedah yang mudah, membolehkan pembangun menulis kod JavaScript dengan cepat dan mudah serta menambahkan kesan interaktif pada halaman web. Antaranya, kaedah hover() digunakan untuk mengikat acara masuk dan keluar tetikus, tetapi kadangkala kita perlu membatalkan acara hover selepas keadaan tertentu dicetuskan Artikel ini akan memperkenalkan cara jQuery membatalkan acara hover.

Pertama, mari kita lihat sintaks kaedah hover():

$(selector).hover(handlerIn, handlerOut)
Salin selepas log masuk

Antaranya, pemilih ialah pemilih elemen yang mana acara itu terikat, dan handlerIn adalah untuk dilaksanakan apabila tetikus memasuki elemen, handlerOut ialah fungsi yang akan dilaksanakan apabila tetikus meninggalkan elemen.

Jika kami ingin membatalkan acara hover, kami boleh menggunakan kaedah off() yang disediakan oleh jQuery. Kaedah off() digunakan untuk mengalih keluar satu atau lebih pengendali acara daripada elemen.

Sintaks adalah seperti berikut:

$(selector).off(event,childSel,handler)
Salin selepas log masuk
  • peristiwa: diperlukan, menunjukkan jenis acara yang akan dipadamkan, berbilang jenis acara dipisahkan oleh ruang
  • childSel : pilihan , mewakili elemen kanak-kanak elemen dan hanya memadamkan pengendali acara pada elemen anak yang diberikan; Jika ditinggalkan, semua acara dipadamkan.
  • Oleh itu, jika kita ingin melepaskan acara hover, kita hanya perlu menggunakan kod berikut:

Antaranya, mouseenter dan mouseleave sesuai dengan tetikus enter dan meninggalkan acara masing-masing.
$(selector).off('mouseenter mouseleave');
Salin selepas log masuk

Perlu diambil perhatian bahawa jika kaedah off() digunakan untuk mengetepikan acara, semua pengendali acara akan dipadamkan. Jika anda hanya mahu mengalih keluar pengendali acara, anda boleh menggunakan parameter ketiga kaedah off() untuk menentukan pengendali acara tertentu untuk dipadamkan.

Sebagai contoh, katakan kita mempunyai kod HTML berikut:

Kami mahu memaparkan petua alat apabila tetikus melayang di atas elemen, tetapi dalam keadaan tertentu (seperti mengklik Lain-lain butang) perlu membatalkan kotak gesaan, anda boleh menggunakan kod berikut:
<div id="box">鼠标悬停会出现提示</div>
Salin selepas log masuk

Dalam kod di atas, kami mula-mula mengikat acara hover, kotak gesaan akan muncul apabila tetikus masuk, dan kotak gesaan akan disembunyikan apabila tetikus pergi . Kemudian, apabila butang lain diklik, kami mengetepikan acara tuding supaya pengguna tidak lagi dapat melihat petua alat.
$(function() {
  var $box = $('#box'); // 获取元素
  $box.hover(function() {
    // 鼠标进入时弹出提示框
    $box.append('<div id="tip">提示内容</div>');
  }, function() {
    // 鼠标离开时隐藏提示框
    $box.find('#tip').remove();
  });
  
  $('#button').on('click', function() {
    // 点击按钮解除hover事件
    $box.off('mouseenter mouseleave');
  });
});
Salin selepas log masuk

Untuk meringkaskan, adalah sangat mudah untuk menggunakan jQuery untuk membatalkan acara hover Anda hanya perlu menggunakan kaedah off() dan menentukan jenis acara yang akan dibatalkan. Sudah tentu, jika kita perlu mengalih keluar pengendali acara tertentu, kita juga boleh menggunakan parameter ketiga yang disediakan oleh kaedah off().

Atas ialah kandungan terperinci Bagaimana untuk membatalkan acara hover dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Terangkan konsep pemuatan malas. Terangkan konsep pemuatan malas. Mar 13, 2025 pm 07:47 PM

Terangkan konsep pemuatan malas.

Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan? Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan? Mar 19, 2025 pm 03:58 PM

Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan?

Bagaimanakah algoritma Rekonsiliasi React berfungsi? Bagaimanakah algoritma Rekonsiliasi React berfungsi? Mar 18, 2025 pm 01:58 PM

Bagaimanakah algoritma Rekonsiliasi React berfungsi?

Terangkan tujuan setiap kaedah kitaran hayat dan kes penggunaannya. Terangkan tujuan setiap kaedah kitaran hayat dan kes penggunaannya. Mar 19, 2025 pm 01:46 PM

Terangkan tujuan setiap kaedah kitaran hayat dan kes penggunaannya.

Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya? Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya? Mar 18, 2025 pm 01:45 PM

Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya?

Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula? Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula? Mar 18, 2025 pm 01:44 PM

Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula?

Apakah kelebihan dan kekurangan komponen terkawal dan tidak terkawal? Apakah kelebihan dan kekurangan komponen terkawal dan tidak terkawal? Mar 19, 2025 pm 04:16 PM

Apakah kelebihan dan kekurangan komponen terkawal dan tidak terkawal?

Apakah teknik pengoptimuman prestasi React (memoisasi, pemisahan kod, pemuatan malas)? Apakah teknik pengoptimuman prestasi React (memoisasi, pemisahan kod, pemuatan malas)? Mar 18, 2025 pm 01:57 PM

Apakah teknik pengoptimuman prestasi React (memoisasi, pemisahan kod, pemuatan malas)?

See all articles