Pandangan yang komprehensif mengenai peristiwa dalam jQuery

Artikel ini dikaji semula oleh Wern Ancheta dan Camilo Reyes. Terima kasih kepada semua pengulas rakan sebaya di SitePoint untuk mendapatkan kandungan SitePoint dengan sebaik -baiknya!

JQuery dapat menangkap hampir semua tingkah laku interaksi pengguna di laman web dan menentukannya sebagai peristiwa. Kepentingan peristiwa adalah bahawa mereka membolehkan anda bertindak balas dengan sewajarnya berdasarkan tindakan pengguna. Sebagai contoh, anda boleh menulis kod untuk menukar warna latar belakang halaman web berdasarkan klik butang atau acara tatal.

JQuery mempunyai banyak kaedah cepat, seperti

, contextmenu() dan hover(), untuk mengendalikan peristiwa yang berbeza. Sebagai tambahan kepada kaedah yang berdedikasi, jQuery juga menyediakan kaedah keyup() yang biasa yang membolehkan anda melampirkan pengendali ke mana -mana peristiwa: on. Ingat, kaedah ini hanya pembalut untuk peristiwa DOM standard yang anda boleh menambah pengendali ke dalam JavaScript tulen. on('eventName', handler)

Tutorial ini dengan cepat akan melihat semua kaedah acara ini (dibahagikan kepada lima kategori utama) dan membincangkan amalan terbaik apabila menggunakannya.

mata utama

acara jQuery menangkap interaksi pengguna, membolehkan aplikasi web responsif dan interaktif. Gunakan kaedah seperti
• untuk melampirkan pengendali acara. .on()
Peristiwa penyemak imbas dalam jQuery termasuk kesilapan pengendalian, mengubah saiz tingkap, dan menatal, di mana kaedah tertentu tertentu dalam versi yang lebih baru ditutup, menekankan penggunaan
• . .on('eventName', handler)'
Acara pemuatan dokumen memastikan bahawa skrip hanya berjalan selepas DOM siap sepenuhnya, mengelakkan kesilapan yang berkaitan dengan unsur -unsur yang tidak diinisialisasi.
peristiwa papan kekunci dan tetikus dalam jQuery mengendalikan pelbagai interaksi, dari tekanan utama ke pergerakan tetikus, termasuk
• , keydown(), keyup(), dan click(). mousemove()
Borang Peristiwa Mengendalikan Input dan Interaksi Pengguna Dalam bentuk, JQuery menyediakan peristiwa khusus untuk mengurus fokus, perubahan, dan penyerahan secara berkesan.

Peristiwa Pelayar

Kategori ini mengandungi tiga peristiwa:

, error dan resize. Acara scroll dicetuskan apabila unsur -unsur seperti imej dimuatkan dengan tidak betul. Kaedah pintasannya telah ditutup sejak JQuery Version 1.8, jadi anda kini harus menggunakan error sebaliknya. on('error', handler)

event resize

Acara ini dicetuskan apabila saiz tetingkap penyemak imbas berubah. Pelayar yang berbeza boleh memanggil pengendali

dengan cara yang berbeza mengikut kaedah pelaksanaan. Penyemak imbas Internet Explorer dan WebKit memanggil pengendali secara berterusan, sementara pelayar seperti Opera hanya memanggilnya apabila acara resize berakhir. resize

Coretan kod berikut bertukar imej berdasarkan lebar tetingkap

. src

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

demonstrasi codepen ini menunjukkan kesan sebenar peristiwa:

Lihat codepen demo

scroll event

Unsur boleh mencetuskan peristiwa ini apabila pengguna skrol ke kedudukan yang berbeza dalam elemen tertentu. Kecuali untuk objek window, mana -mana elemen dengan bar tatal boleh mencetuskan acara ini. Sebagai contoh, mana -mana elemen yang menetapkan atribut overflow ke scroll atau mana -mana iframe scrollable boleh mencetuskan acara ini.

ingat bahawa pengendali dipanggil apabila kedudukan tatal berubah. Punca tatal tidak penting. Ia boleh dicetuskan dengan menekan kekunci anak panah, mengklik atau menyeret bar skrol, atau menggunakan roda tetikus. Dalam kod di bawah, kami menyemak sama ada pengguna menatal lebih daripada 500 piksel dan melakukan beberapa operasi.

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

Dalam demo codepen di bawah, jika anda terus menatal dan sampai ke bawah, anda harus melihat pemberitahuan yang memberitahu anda bahawa anda hampir sampai ke bahagian bawah halaman:

Lihat codepen demo

Acara pemuatan dokumen

JQuery mempunyai tiga kaedah, yang dicetuskan mengikut status dokumen atau DOM. Mereka adalah load, unload dan ready.

load() boleh digunakan untuk melampirkan pengendali ke mana -mana elemen yang memuat sumber luaran seperti imej, skrip, iframes, dan window objek sendiri. Acara ini dipecat apabila elemen yang dilampirkan dan semua elemen anaknya dimuatkan sepenuhnya. Apabila digunakan dengan imej, ia membawa beberapa masalah. Pertama, ia tidak akan membesarkan pokok Dom dengan betul. Masalah kedua adalah bahawa ia tidak boleh dipercayai atau melambangkan penyemak imbas.

Apabila pengguna meninggalkan dari navigasi web, acara unload dicetuskan. Ini mungkin kerana pengguna mengklik pautan, menaip URL baru ke bar alamat, atau menutup tetingkap penyemak imbas. Page Reloading juga mencetuskan acara ini. Sila ambil perhatian bahawa menggunakan preventDefault() tidak akan membatalkan acara unload. Di samping itu, kebanyakan penyemak imbas mengabaikan panggilan ke alert(), confirm() dan prompt() di dalam pengendali acara ini, yang bermaksud kod berikut tidak akan berfungsi:

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

kedua -dua load() dan unload() telah ditamatkan sejak versi 1.8.

ready event

Dalam kebanyakan kes, semua elemen (seperti imej) tidak perlu dimuat sepenuhnya sehingga skrip dapat berjalan tanpa sebarang masalah. Apa yang anda perlukan untuk memastikan bahawa hierarki Dom dibina sepenuhnya. Acara ready mengendalikan ini untuk anda. Mana -mana pengendali yang dilampirkan pada acara ini hanya akan dijalankan selepas DOM siap. Di dalam pengendali, anda boleh menjalankan kod jQuery atau melampirkan pengendali acara ke unsur -unsur lain tanpa bimbang mengenainya.

Demonstrasi codepen di bawah memuat imej resolusi tinggi. Anda akan melihat bahawa DOM sudah siap sebelum imej dimuatkan sepenuhnya.

Lihat codepen demo

Jika kod anda bergantung kepada nilai beberapa sifat gaya CSS, anda harus terlebih dahulu memberikan rujukan kepada stylesheet yang sepadan atau gaya tertanam sebelum menjalankannya.

peristiwa papan kekunci

Acara papan kekunci boleh dicetuskan oleh interaksi pengguna dengan papan kekunci. Setiap acara sedemikian akan mengandungi maklumat mengenai akhbar utama dan jenis acara. Terdapat tiga pintasan acara papan kekunci dalam jQuery - keydown(), keyup() dan keypress().

keyup dan keydown acara

seperti yang dicadangkan, keyup akan dicetuskan apabila pengguna melepaskan kunci pada papan kekunci; Pengendali untuk kedua -dua peristiwa boleh dilampirkan pada mana -mana elemen, tetapi hanya pengendali pada elemen yang kini dengan tumpuan akan dicetuskan. keydown

Adalah disyorkan untuk menggunakan atribut

objek acara untuk menentukan kekunci yang ditekan. Ini kerana penyemak imbas menggunakan sifat yang berbeza untuk menyimpan maklumat ini, dan jQuery menormalkan atribut which untuk mendapatkan maklumat ini dengan pasti. which

Satu lagi perkara yang perlu diingat ialah kedua -dua peristiwa tidak membezakan antara

dan <kbd>a</kbd>. Dalam kes yang kedua, <kbd>shift a</kbd> dan <kbd>shift</kbd> didaftarkan secara berasingan. Dalam kod di bawah, saya menunjukkan pengguna kotak amaran yang mendaftarkan mana -mana peristiwa <kbd>a</kbd>. Apabila kekunci keydown ditekan, elemen tertentu dipadam dari DOM. <kbd>y</kbd>

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

Lihat codepen demo

event keypress

Acara ini serupa dengan acara

. Satu perbezaan utama ialah pengubah dan kekunci bukan cetak (seperti keydown, <kbd>Shift</kbd>, dan lain-lain) tidak mencetuskan peristiwa <kbd>Esc</kbd>. Apabila saya mengatakan bahawa anda tidak boleh menggunakan acara keypress untuk menangkap kunci khas (seperti kekunci anak panah), saya tidak boleh meletakkannya terlalu banyak. Apabila anda ingin mengetahui watak mana (seperti A atau A) anda telah masuk, anda harus menggunakan keypress. keypress

Coretan kod berikut menyembunyikan elemen berdasarkan kekunci yang ditekan:

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

Lihat codepen demo

peristiwa tetikus

Acara tetikus dicetuskan apabila pengguna berinteraksi dengan peranti menunjuk (seperti tetikus). Peristiwa -peristiwa ini boleh didasarkan pada klik (seperti

, click dan dblclick) atau berdasarkan mudah alih (seperti contextmenu, mouseenter dan mouseleave). Dalam bahagian ini, saya akan membincangkan secara ringkas semua peristiwa ini dan memasukkan beberapa demonstrasi untuk menggambarkan sedikit perbezaan di antara mereka. mousemove

Peristiwa berasaskan klik

JQuery mentakrifkan kaedah acara berasaskan lima klik. Peristiwa dan

(seperti yang dapat dilihat dari nama) dipecat apabila pengguna menekan dan melepaskan butang tetikus pada elemen masing -masing. Sebaliknya, peristiwa mousedown hanya dicetuskan apabila butang tetikus ditekan pada elemen yang ditentukan dan kemudiannya dikeluarkan. mouseup

dblclick Sedikit rumit. Untuk acara yang akan didaftarkan sebagai dblclick, perlu ada dua klik tetikus cepat sebelum selang pengiraan yang berkaitan dengan sistem tamat. Anda tidak boleh melampirkan pengendali ke kedua-dua click dan dblclick satu elemen, kerana peristiwa yang dicetuskan oleh klik dua kali adalah penyemak imbas khusus. Sesetengah penyemak imbas boleh mendaftarkan dua acara klik tunggal sebelum mengklik dua kali, sementara yang lain hanya boleh mendaftarkan satu acara klik tunggal sebelum mengklik dua kali.

Acara contextmenu dicetuskan selepas klik kanan pada elemen tetapi sebelum menu konteks dipaparkan. Ini bermakna anda boleh menggunakan kod yang sepadan dalam pengendali acara untuk mengelakkan menu konteks lalai daripada memaparkan.

coretan kod berikut menghalang menu konteks lalai daripada dipaparkan apabila klik kanan, tetapi sebaliknya memaparkan menu tersuai:

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

Demo ini menggunakan gaya CSS pada imej semasa mengklik imej dan mempunyai menu konteks tersuai:

Lihat codepen demo

Acara berasaskan mudah alih

Beberapa peristiwa adalah berdasarkan pergerakan penunjuk tetikus pada, memasuki atau mengeluarkan elemen. Terdapat enam kaedah acara berasaskan mudah alih.

mari kita mulakan dengan peristiwa mouseover dan mouseenter. Seperti namanya, kedua -dua peristiwa dipecat apabila penunjuk tetikus memasuki elemen. Begitu juga, apabila penunjuk tetikus meninggalkan elemen, peristiwa mouseleave dan mouseout dipecat.

Satu perbezaan antara

dan mouseleave adalah bahawa bekas itu dipecat hanya apabila penunjuk tetikus bergerak di luar elemen yang mengikatnya. Sebaliknya, walaupun untuk pergerakan di luar mana -mana keturunan elemen, mouseout akan dicetuskan. Terdapat perbezaan yang sama antara mouseout dan mouseenter. mouseover

Lihat codepen demo

mari kita lihat bagaimana peristiwa itu berubah berdasarkan pergerakan tetikus,

dan mouseenter. Cuba masukkan kotak biru besar dari kanan dan berhenti sebelum memasukkan kotak merah jambu di sebelah kanan. mouseover dan kini harus mempunyai nilai 1. Jika anda bergerak ke kiri dan masukkan kotak merah jambu, kiraan mouseenter akan berubah menjadi 2. Ini berlaku kerana peristiwa mouseover adalah menggelegak. Acara mouseover pada kotak merah jambu "Bubles" ke kotak biru luar, meningkatkan kiraan acara mouseover oleh 1. Acara mouseover kebakaran sekali lagi apabila anda bergerak lebih jauh ke kiri dan berhenti di antara dua kotak merah jambu. Apabila anda sampai ke hujung kiri kotak biru, kiraan acara mouseover hendaklah 5, dan kiraan acara mouseover masih harus 1. mouseover mouseenter Penalaran yang sama boleh digunakan untuk menerangkan kiraan

dan

peristiwa. Cuba bergerak ke arah yang berbeza dan lihat bagaimana kiraan berubah. mouseleave

mousemove dan hover acara

Apabila penunjuk tetikus bergerak dalam elemen, acara mousemove dicetuskan. Selagi ada tetikus bergerak, ia akan mencetuskan walaupun ia adalah sekecil piksel. Oleh itu, beratus -ratus peristiwa boleh dicetuskan dalam masa yang sangat singkat. Seperti yang anda boleh bayangkan, melakukan operasi kompleks dalam pengendali acara akan menyebabkan penyemak imbas untuk ketinggalan. Adalah disyorkan untuk membuat pengendali acara mousemove secepat mungkin dan melepaskannya jika tidak lagi diperlukan.

hover percuma hanya apabila penunjuk tetikus memasuki atau meninggalkan elemen. Terdapat dua cara untuk memanggil kaedah hover. Yang pertama ialah:

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

di sini, apabila penunjuk tetikus memasuki elemen, handlerIn() dilaksanakan apabila penunjuk tetikus meninggalkan elemen. Kaedah kedua ialah: handlerOut()

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

Kali ini, fungsi

yang sama akan dilaksanakan apabila memasuki dan meninggalkan elemen. handlerInOut

Lihat codepen demo

Nota: Demonstrasi ini menggunakan kesan penapis CSS, yang ia tidak menyokong.

Borang peristiwa

Borang

di mana -mana di Internet. Hampir setiap pengguna mengisi borang pada satu ketika. JQuery mempunyai cara istimewa untuk mengendalikan peristiwa bentuk. Peristiwa -peristiwa ini boleh dipecat apabila nilai berubah atau kehilangan tumpuan. Terdapat tujuh peristiwa bentuk secara keseluruhan, dan kami akan membincangkannya satu persatu.

, blur, focus, focusin dan focusout acara

Apabila unsur mendapat tumpuan, acara focus dicetuskan. Ia hanya berfungsi dengan elemen bentuk dan tag utama. Untuk mencetuskan fokus pada mana -mana elemen lain, anda perlu menetapkan atribut tabindex elemen. Ingat bahawa di Internet Explorer, menetapkan fokus pada unsur -unsur tersembunyi boleh menyebabkan kesilapan. Jika anda perlu mencetuskan acara focus tanpa secara jelas menetapkan fokus, anda boleh memanggil kaedah triggerHandler("focus").

Apabila elemen kehilangan fokus, acara blur dicetuskan. Dalam pelayar yang lebih tua, acara ini hanya terpakai untuk membentuk elemen.

tidak seperti focus peristiwa, focusin dicetuskan apabila elemen atau keturunannya mendapat tumpuan. Begitu juga, focusout dicetuskan apabila mana -mana elemen atau keturunannya kehilangan fokus. Oleh itu, jika anda mahu acara itu gelembung, anda harus menggunakan kedua -dua acara.

select, change dan submit peristiwa

Apabila nilai perubahan elemen, peristiwa change dicetuskan. Acara ini hanya terpakai untuk unsur -unsur <input>, <select> dan <textarea>. Untuk kotak semak, butang radio, dan kotak pemilihan, acara ini dicetuskan sebaik sahaja pengguna membuat sebarang pilihan. Pada unsur -unsur lain, ia hanya akan membakar selepas elemen kehilangan tumpuan. Juga ambil perhatian bahawa jika anda menukar nilai elemen input menggunakan JavaScript, acara ini tidak akan dicetuskan.

Apabila pengguna membuat pilihan teks dalam elemen, acara select dicetuskan. Acara ini mempunyai ruang lingkup yang lebih terhad dan hanya terpakai untuk unsur -unsur <input> dan <textarea>. Jika anda ingin mengambil teks yang dipilih, anda mesti menggunakan plugin jQuery penyemak imbas.

Apabila pengguna cuba mengemukakan borang, acara submit dicetuskan. Anda hanya boleh melampirkan pengendali untuk membentuk elemen. Untuk mencetuskan acara ini, pengguna mesti mengklik elemen <button>, <input type="submit"> atau <input type="image">. Menariknya, acara JavaScript submit tidak gelembung di Internet Explorer. Walau bagaimanapun, tingkah laku ini telah diseragamkan dalam penyemak imbas sejak versi jQuery 1.4.

Lihat codepen demo

perubahan dalam jQuery 3

Sejak jQuery versi 1.8, load, error dan unload kaedah telah ditutup. load() Kaedah ini sememangnya tidak jelas. Kaedah ini mungkin bermakna beban Ajax atau sebenarnya menembak load peristiwa. Begitu juga, kaedah error juga boleh dikelirukan dengan kaedah jQuery.error(). Sekarang dalam JQuery 3, kaedah ini akhirnya telah dikeluarkan. Anda kini mesti menggunakan kaedah on untuk mendaftarkan pendengar acara ini.

Pemikiran akhir

Dalam artikel ini, saya telah merangkumi perbezaan antara semua kaedah acara jQuery utama dan peristiwa yang serupa. Mengetahui bila menggunakan keypress bukan keydown boleh membantu anda mengelakkan kerumitan dan menjimatkan masa yang berharga. Walaupun ada kemungkinan untuk menyambung ke peristiwa DOM menggunakan JavaScript tulen, JQuery mempunyai beberapa normalisasi perbezaan silang penyemak imbas di latar belakang, bergantung pada pelayar laman web/aplikasi anda mesti menyokong, yang mungkin menjadi kelebihan.

Untuk mengetahui lebih lanjut mengenai acara, anda boleh mengakses dokumentasi jQuery rasmi. Sekiranya anda mempunyai sebarang pertanyaan atau petua mengenai penggunaan acara dalam jQuery, sila tinggalkan komen.

Soalan Lazim untuk JQuery Events (FAQ)

Bagaimana untuk mencegah peristiwa dalam jQuery dari bubbled?

Dalam jQuery, anda boleh menggunakan kaedah event.stopPropagation() untuk mengelakkan peristiwa dari gelembung ke atas pokok Dom. Kaedah ini menghalang peristiwa daripada menyebarkan ke elemen induk. Perlu diingatkan bahawa ia tidak menghalang tingkah laku lalai daripada berlaku; Berikut adalah contoh cara menggunakannya:

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

Apakah perbezaan antara

dan .bind() kaedah dalam .live()?

Kaedah

dan .bind() dalam .live() jQuery kedua -duanya digunakan untuk melampirkan pengendali acara ke elemen. Perbezaan utama di antara mereka ialah .bind() hanya melekatkan pengendali ke elemen semasa, manakala .live() melampirkan pengendali ke elemen semasa dan semua elemen yang sepadan dengan pemilih pada masa akan datang. Walau bagaimanapun, perlu diperhatikan bahawa kaedah .live() telah ditolak sejak JQuery 1.7 dan telah dikeluarkan dalam JQuery 1.9. Anda harus menggunakan kaedah .on() sebaliknya.

Bagaimana untuk mencetuskan peristiwa yang diprogramkan dalam jQuery?

anda boleh menggunakan kaedah .trigger() untuk mencetuskan peristiwa secara programatik dalam jQuery. Kaedah ini membolehkan anda mencetuskan peristiwa yang ditentukan secara manual pada elemen. Berikut adalah contoh:

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

Apakah perwakilan acara dalam jQuery dan mengapa ia berguna?

Delegasi Acara di JQuery adalah teknik di mana anda mewakilkan pemprosesan peristiwa kepada elemen induk dan bukannya mengikat pengendali acara kepada unsur -unsur individu. Ini amat berguna apabila anda mempunyai sejumlah besar elemen yang memerlukan pengendali acara seperti, atau apabila anda secara dinamik menambah elemen ke DOM. Ia meningkatkan prestasi dengan mengurangkan bilangan pengendali acara yang perlu terikat.

Bagaimana untuk menyekat operasi lalai peristiwa dalam jQuery?

anda boleh menggunakan kaedah event.preventDefault() untuk menyekat operasi lalai peristiwa dalam jQuery. Kaedah ini menghalang operasi lalai peristiwa daripada berlaku. Sebagai contoh, ia boleh menghalang pautan dari URL berikut.

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

Apakah perbezaan antara .click() dan .on('click') dalam jQuery?

Kaedah .click() dalam jQuery ialah singkatan .on('click'). Kedua -dua kaedah melampirkan pengendali acara klik ke elemen yang dipilih. Walau bagaimanapun, kaedah .on() menyediakan fleksibiliti yang lebih besar kerana ia juga boleh mengendalikan peristiwa elemen ditambah secara dinamik dan boleh mengendalikan pelbagai peristiwa sekaligus.

Bagaimana untuk mengesan acara klik dua kali dalam jQuery?

anda boleh menggunakan kaedah .dblclick() untuk mengesan peristiwa klik dua kali dalam jQuery. Kaedah ini melampirkan fungsi yang dilaksanakan apabila peristiwa klik dua kali berlaku pada elemen yang dipilih. Berikut adalah contoh:

$(window).unload(function() {
  alert("请不要离开！"); // 不起作用。
});

Bagaimana untuk mengikat pelbagai peristiwa ke unsur -unsur dalam jQuery?

anda boleh menggunakan kaedah .on() untuk mengikat pelbagai peristiwa ke unsur -unsur dalam jQuery. Kaedah ini membolehkan anda melampirkan pelbagai pengendali acara ke elemen yang dipilih. Berikut adalah contoh:

$("#alert").keydown(function(event) {
  switch (event.which) {
    case 89: // y的键码
      $("#element").remove(); // 从DOM中删除元素
      break;
  }
});

Bagaimana untuk Unbind Handler Acara di JQuery?

anda boleh menggunakan kaedah .off() untuk melepaskan pengendali acara dalam jQuery. Kaedah ini menghilangkan pengendali acara yang dilampirkan menggunakan .on(). Berikut adalah contoh:

$("body").keypress(function(event) {
  switch (event.keyCode) {
    case 75:
      // 75在keypress事件中代表大写K
      $(".K").css("display", "none");
      break;
  }
});

Bagaimana untuk mengesan acara klik kanan dalam jQuery?

anda boleh menggunakan kaedah .contextmenu() atau periksa objek "mana" objek acara dalam acara mousedown untuk mengesan peristiwa klik kanan dalam jQuery. Harta "mana" akan menjadi 3 untuk klik kanan. Berikut adalah contoh:

$("img").contextmenu(function(event) {
  event.preventDefault();
  $("#custom-menu")
    .show().css({
      top: event.pageY + 10,
      left: event.pageX + 10
      // 在鼠标点击附近显示菜单
    });
});

$("#custom-menu #option").click(function() {
   $("img").toggleClass("class-name");
   // 切换图像类。
});

Atas ialah kandungan terperinci Pandangan yang komprehensif mengenai peristiwa dalam jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!