ฉันจะตรวจสอบได้อย่างไรว่ามีการกดคีย์ระหว่างเหตุการณ์คลิกด้วย jQuery หรือไม่


106

ฉันต้องการจับเหตุการณ์การคลิกด้วย jQuery และสามารถบอกได้ว่ามีการกดคีย์พร้อมกันหรือไม่ดังนั้นฉันจึงสามารถแยกภายในฟังก์ชันเรียกกลับตามเหตุการณ์การกดแป้นพิมพ์

ตัวอย่างเช่น:

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

เป็นไปได้หรือไม่หรือถ้าเป็นไปได้อย่างไร?

คำตอบ:


174

คุณสามารถตรวจจับปุ่ม shift, alt และ control ได้อย่างง่ายดายจากคุณสมบัติของเหตุการณ์

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

ดูquirksmodeสำหรับคุณสมบัติเพิ่มเติม หากคุณต้องการที่จะตรวจสอบคีย์ที่อื่นดูคำตอบของ cletus


3
ฉันไม่เห็นคุณสมบัตินั้นในวัตถุเหตุการณ์ jQuery: api.jquery.com/category/events/event-object
cletus

1
ดังที่หน้าระบุว่า "คุณสมบัติส่วนใหญ่จากเหตุการณ์ดั้งเดิมจะถูกคัดลอกและทำให้เป็นมาตรฐานไปยังวัตถุเหตุการณ์ใหม่" ctrlKey, altKey และอื่น ๆ เป็นส่วนหนึ่งของมาตรฐาน ecmascript (ดูลิงก์แรกในหน้า jquery api ดังกล่าวข้างต้น) ดังนั้น (อย่างน้อยในเบราว์เซอร์ที่เหมาะสม) วัตถุเหตุการณ์มักจะมีชุดคุณสมบัติเหล่านั้นด้วย
kkyy

3
โหมด Quirks บอกเพียงว่าสิ่งเหล่านี้ถูกกำหนดไว้ในเหตุการณ์สำคัญ .. ไม่มีการพูดถึงเหตุการณ์ของเมาส์

6
คุณสามารถตรวจจับคีย์คำสั่งของ Mac OS X ได้โดยใช้if (e.metaKey) alert('Command down')ไฟล์. นี่คือบทความดีๆเกี่ยวกับเหตุการณ์สำคัญใน JS unixpapa.com/js/key.html
F Lekschas

49

คุณต้องติดตามสถานะคีย์แยกต่างหากโดยใช้keydown()และ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;
  }
});

ดูรายการของรหัสที่สำคัญ ตอนนี้คุณสามารถตรวจสอบได้ว่า:

$("button").click(function() {
  if (ctrlPressed) {
    // do something
  } else {
    // do something else
  }
});

6
ข้อเสียอย่างหนึ่งของวิธีนี้ (ไม่ใช่ว่าฉันรู้วิธีที่ดีกว่า) คือถ้าคุณตรวจพบคีย์ ALT และผู้ใช้ ALT-Tabs ไปยังหน้าต่างอื่นเบราว์เซอร์จะตรวจไม่พบเหตุการณ์การกดแป้นพิมพ์เนื่องจากเกิดขึ้นกับแอปพลิเคชันอื่น . จากจุดนั้น jquery จะคิดว่าคีย์ไม่ทำงานจนกว่าพวกเขาจะคีย์อัพภายในแอพ jquery ของคุณ สิ่งนี้สำคัญเฉพาะกับปุ่ม ALT เท่าที่ฉันสามารถจินตนาการได้
Flat Cat

1
สำหรับ Mac OS X นั้นจะเป็น Cmd-Tab แต่ฉันคิดว่าหลักยังคงมีอยู่
murftown

1
หรือ Ctrl + Tab เพื่อเปลี่ยนแท็บของเบราว์เซอร์
ดู


3

โดยไม่ต้องขโมยฟ้าร้องของ @Arun Prasadนี่คือตัวอย่าง JS บริสุทธิ์ที่ฉันปรับปรุงใหม่เพื่อหยุดการทำงานเริ่มต้นซึ่งจะเปิดหน้าต่างใหม่หากกด CTL +

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>

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.