Bagaimana cara memeriksa apakah ada tombol yang ditekan selama acara klik dengan jQuery?

105

Saya ingin menangkap acara klik dengan jQuery dan dapat mengetahui apakah tombol ditekan pada saat yang sama sehingga saya dapat bercabang dalam fungsi panggilan balik berdasarkan acara penekanan tombol.

Sebagai contoh:

$("button").click(function() {
    if([KEYPRESSED WHILE CLICKED]) {
        // Do something...
    } else {
        // Do something different...
    }
});

Apakah ini mungkin sama sekali atau bagaimana itu bisa dilakukan jika memungkinkan?

daniel smith
sumber

Jawaban:

174

Anda dapat dengan mudah mendeteksi tombol shift, alt dan kontrol dari properti acara;

$("button").click(function(evt) {
  if (evt.ctrlKey)
    alert('Ctrl down');
  if (evt.altKey)
    alert('Alt down');
  // ...
});

Lihat quirksmode untuk properti lainnya. Jika Anda ingin mendeteksi kunci lain, lihat jawaban cletus .

kkyy
sumber
3
Saya tidak melihat properti itu di objek acara jQuery: api.jquery.com/category/events/event-object
cletus
1
Seperti yang dikatakan laman tersebut, "Sebagian besar properti dari acara asli disalin dan dinormalisasi ke objek acara baru." ctrlKey, altKey dll. adalah bagian dari standar ecmascript (lihat link pertama di halaman jquery api tersebut), jadi (setidaknya di browser yang layak) objek acara biasanya juga memiliki set properti tersebut.
kkyy
3
Mode Quirks hanya mengatakan ini didefinisikan dalam peristiwa utama .. tidak menyebutkan tentang peristiwa mouse.
6
Anda bahkan dapat mendeteksi tombol perintah Mac OS X menggunakan if (e.metaKey) alert('Command down'). Berikut artikel bagus tentang peristiwa penting di JS unixpapa.com/js/key.html
F Lekscha
48

Anda perlu melacak status kunci secara terpisah menggunakan keydown()dan keyup():

var ctrlPressed = false;
$(window).keydown(function(evt) {
  if (evt.which == 17) { // ctrl
    ctrlPressed = true;
  }
}).keyup(function(evt) {
  if (evt.which == 17) { // ctrl
    ctrlPressed = false;
  }
});

Lihat daftar kode kunci . Sekarang Anda dapat memeriksanya:

$("button").click(function() {
  if (ctrlPressed) {
    // do something
  } else {
    // do something else
  }
});
cletus
sumber
6
Satu sisi buruk dari metode ini (bukan berarti saya tahu cara yang lebih baik) adalah jika Anda mendeteksi tombol ALT, dan pengguna ALT-Tab ke jendela lain, maka peristiwa keyup tidak terdeteksi oleh browser karena terjadi pada aplikasi lain. . Sejak saat itu, jquery menganggap kuncinya sedang down, sampai mereka masuk ke dalam aplikasi jquery Anda. Ini hanya penting dengan tombol ALT, sejauh yang bisa saya bayangkan.
Flat Cat
1
Untuk Mac OS X itu akan menjadi Cmd-Tab, tapi saya pikir kepala sekolah masih berlaku
murftown
1
Atau Ctrl + Tab untuk mengubah tab browser
bahkan
9

Saya bisa menggunakannya dengan JavaScript saja

 <a  href="" onclick="return Show(event)"></a>

  function Show(event) {
            if (event.ctrlKey) { 
                 alert('Ctrl down');
            }
     }
Arun Prasad ES
sumber
1
Selanjutnya, saya membuat sedikit penyesuaian dan pena: codepen.io/vr_driver/pen/YRoRYO
vr_driver
3

Tanpa mencuri guntur @Arun Prasad , berikut adalah cuplikan JS murni yang saya ulangi untuk menghentikan tindakan default, yang jika tidak akan membuka jendela baru jika CTL + klik ditekan.

function Show(event) 
{
  if (event.ctrlKey) 
  {
    alert('Ctrl held down which clicked');
  } 
  else 
  {
    alert('Ctrl NOT pressed');
  }
  return false
}
<p>Hold down CTL on the link to get a different message</p>

<a href="" onclick="return Show(event)">click me</a>

vr_driver
sumber