javascript - Memicu event onclick menggunakan klik tengah

Saya menggunakan event onclick dari tautan yang di-hash untuk membuka <div> sebagai pop up. Tetapi klik tengah tidak memicu event onclick melainkan hanya mengambil nilai atribut href dari tautan dan memuat URL di halaman baru. Bagaimana saya bisa menggunakan klik tengah untuk membuka <div> sebagai pop up?

Jawaban #1

EDIT

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

/EDIT

Jawaban Beggs benar, tetapi terdengar seperti kamu ingin mencegah tindakan 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 dari event.

Jawaban #2

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

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

Lalu di file skrip 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 addEventListener ke 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>

Periksa halaman mdn tentang peristiwa auxclick di sini.

Jawaban #3

Anda dapat menggunakan

event.button

untuk mengidentifikasi tombol mouse mana yang diklik.

Mengembalikan nilai integer yang menunjukkan tombol yang berubah status.

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

Perlu dicatat bahwa konvensi ini tidak diikuti di Internet Explorer: lihat QuirksMode untuk rincian.

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

Juga baca

Tombol mouse mana yang telah diklik?

Ada dua properti untuk mengetahui tombol mouse mana yang telah diklik: which dan button. Harap dicatat bahwa properti ini tidak selalu bekerja pada event klik. Untuk mendeteksi tombol mouse dengan aman, Anda harus menggunakan event 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>

Jawaban #4

Pertanyaan ini agak lama, tapi saya menemukan solusinya:

$(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 memicu event "click" untuk roda mouse

Bekerja di FF dan Chrome

Artikel terkait