Bagaimanakah Saya Boleh Mencontohi Kefungsian Klik Kanan Semasa Mencegah Menu Konteks Lalai?

Meniru Pengendalian Acara Klik Tetikus Kanan

Menu konteks penyemak imbas boleh menjadi kesulitan apabila cuba melaksanakan fungsi klik kanan tersuai. Melumpuhkan menu konteks membolehkan pengalaman pengguna yang lebih diperkemas. Walau bagaimanapun, ini juga menimbulkan persoalan tentang cara mencetuskan tindakan tersuai dengan klik kanan tetikus.

Menggunakan Kaedah bind() jQuery

Satu pendekatan awal mungkin menggunakan Kaedah bind() jQuery untuk melampirkan pengendali acara ke "menu konteks" acara:

$(document).bind("contextmenu",function(e){
    $('.alert').fadeToggle();
    return false;
});

Kod ini melumpuhkan menu konteks penyemak imbas tetapi gagal mencetuskan sebarang tindakan tersuai pada klik kanan tetikus.

Pendekatan Alternatif dengan document.oncontextmenu

Untuk berjaya mengendalikan klik kanan tetikus, kami perlu melumpuhkan menu konteks menggunakan sifat document.oncontextmenu JavaScript dan tangkap acara turun tetikus secara berasingan menggunakan jQuery:

$(document).ready(function(){ 
  document.oncontextmenu = function() {return false;};

  $(document).mousedown(function(e){ 
    if( e.button == 2 ) { 
      alert('Right mouse button!'); 
      return false; 
    } 
    return true; 
  }); 
});

1. Lumpuhkan Menu Konteks: document.oncontextmenu = function() {return false;} melumpuhkan menu konteks penyemak imbas.
2. Acara Tangkap Mouse Down: $(document).mousedown(function(e){ ... } menangkap acara tetikus turun.
3. Kenal pasti Butang Tetikus Kanan: e.butang == 2 menyemak sama ada tetikus kanan butang ditekan.
4. Cetuskan Tindakan Tersuai: Jika butang kanan tetikus ditekan, amaran dipaparkan dan bukannya menu konteks.

Pendekatan ini mengendalikan peristiwa klik kanan tetikus dengan berkesan sambil menghalang menu konteks penyemak imbas daripada muncul.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencontohi Kefungsian Klik Kanan Semasa Mencegah Menu Konteks Lalai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!