Memicu acara onclick menggunakan klik tengah

Saya menggunakan onclickacara link hash untuk membuka <div>sebagai pop up. Tetapi klik tengah tidak memicu onclickperistiwa tetapi hanya mengambil nilai hrefatribut dari link dan memuat URL di halaman baru. Bagaimana cara menggunakan klik tengah untuk membuka <div>sebagai popup?

EDIT

Jawaban ini sudah tidak digunakan lagi dan tidak berfungsi di Chrome. Anda kemungkinan besar akan berakhir menggunakan acara auxlink , tetapi silakan merujuk ke jawaban lain di bawah ini.

/ EDIT

jawaban beggs benar, tapi sepertinya Anda ingin mencegah aksi default dari klik tengah. Dalam hal ini, sertakan yang berikut ini

$("#foo").on('click', function(e) {
   if (e.which == 2) {
      e.preventDefault();
      alert("middle button"); 
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="foo" href="http://example.com">middle click me</a>

preventDefault () akan menghentikan tindakan default acara.

Agar tombol klik tengah / roda mouse terdeteksi, Anda harus menggunakan acara tersebut auxclick. Misalnya:

<a href="https://example.com" onauxclick="func()" id="myLink"></a>

Kemudian di file script Anda

function func(e) {
  if (e.button == 1) {
    alert("middle button clicked")
  }
}

Jika Anda ingin melakukannya dari JavaScript (tanpa menggunakan atribut HTML onauxclick), maka Anda addEventListenerke elemen:

let myLink = document.getElementById('myLink')
myLink.addEventListener('auxclick', function(e) {
  if (e.button == 1) {
    alert("middle button clicked")
  }
})

<a id="myLink" href="http://example.com">middle click me</a>

Lihat halaman mdn tentang auxclickacara di sini .

Kamu bisa memakai

event.button

untuk mengidentifikasi tombol mouse mana yang diklik.

Mengembalikan nilai integer yang menunjukkan tombol yang mengubah status.

• 0 untuk 'klik' standar, biasanya tombol kiri
• 1 untuk tombol tengah, biasanya klik roda
• 2 untuk tombol kanan, biasanya klik kanan

Perhatikan bahwa konvensi ini tidak diikuti di Internet Explorer: lihat QuirksMode untuk detailnya.

Urutan tombol mungkin berbeda tergantung pada bagaimana perangkat penunjuk telah dikonfigurasi.

Baca juga

Tombol mouse mana yang telah diklik?

Ada dua properti untuk mengetahui tombol mouse mana yang telah diklik: yang mana dan tombol. Harap diperhatikan bahwa properti ini tidak selalu berfungsi pada acara klik. Untuk mendeteksi tombol mouse dengan aman, Anda harus menggunakan peristiwa mousedown atau mouseup.

document.getElementById('foo').addEventListener('click', function(e) {
  console.log(e.button);
  e.preventDefault();
});

<a id="foo" href="http://example.com">middle click me</a>

Saya biasanya benci ketika orang menawarkan alternatif daripada solusi, tetapi karena solusi telah disediakan, saya akan melanggar aturan saya sendiri.

Situs web di mana fitur klik tengah diganti cenderung benar-benar mengganggu saya. Saya biasanya mengklik tengah karena saya ingin membuka konten baru di tab baru sambil melihat konten saat ini tanpa halangan. Kapan pun Anda dapat membiarkan fungsionalitas klik tengah sendiri dan membuat konten yang relevan tersedia melalui atribut HREF dari elemen yang Anda klik, saya sangat yakin itulah yang harus Anda lakukan.

jQuery menyediakan .whichatribut pada acara yang memberikan id tombol klik dari kiri ke kanan sebagai 1, 2, 3. Dalam hal ini Anda menginginkan 2.

Pemakaian:

$("#foo").live('click', function(e) { 
   if( e.which == 2 ) {
      alert("middle button"); 
   }
}); 

Jawaban Adamantium juga akan berfungsi tetapi Anda perlu berhati-hati terhadap IE saat dia mencatat:

$("#foo").live('click', function(e) { 
   if((!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 2)) { 
     alert("middle button"); 
   } 
});

Ingat juga .buttonatributnya adalah 0-indexed bukan 1-indexed like .which.

Pertanyaan ini agak tua, tetapi saya menemukan solusi:

$(window).on('mousedown', function(e) {
   if( e.which == 2 ) {
      e.preventDefault();
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">middle click me</a>

Chrome tidak mengaktifkan peristiwa "klik" untuk roda mouse

Bekerja di FF dan Chrome

Metode yang tepat adalah dengan menggunakan .on, seperti yang .livesudah tidak digunakan lagi dan kemudian dihapus dari jQuery:

$("#foo").on('click', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
      alert("middle button"); 
   }
});

Atau jika Anda ingin nuansa "hidup" dan #footidak ada di halaman Anda di awal dokumen:

$(document).on('click', '#foo', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
      alert("middle button"); 
   }
});

jawaban asli

Saya tahu saya terlambat ke pesta, tetapi bagi mereka yang masih mengalami masalah dengan penanganan klik tengah, periksa apakah Anda mendelegasikan acara tersebut. Dalam kasus pendelegasian, clickacara tidak terpicu. Membandingkan:

Ini berfungsi untuk klik tengah:

$('a').on('click', function(){
  console.log('middle click');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">middle click me</a>

Ini tidak berfungsi untuk klik tengah:

$('div').on('click', 'a', function(){
  alert('middle click');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="http://example.com">middle click here</a>
</div>

Jika Anda masih perlu melacak klik tengah menggunakan delegasi acara , satu-satunya cara seperti yang dinyatakan dalam tiket jQuery terkait , adalah dengan menggunakanmousedown ataumouseup sebagai gantinya. Seperti:

Ini berfungsi untuk klik tengah yang didelegasikan:

$('div').on('mouseup', 'a', function(){
  console.log('middle click');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="http://example.com">middle click me</a>
</div>

Lihat secara online di sini .