Bagaimana untuk membatalkan acara hover dalam jquery

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)

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)

• 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');

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>

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

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!