Làm cách nào để kiểm tra xem một phím có được nhấn trong sự kiện nhấp chuột với jQuery hay không?

105

Tôi muốn nắm bắt sự kiện nhấp chuột với jQuery và có thể biết liệu một phím có được nhấn cùng một lúc hay không để tôi có thể phân nhánh trong hàm gọi lại dựa trên sự kiện nhấn phím.

Ví dụ:

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

Điều này có thể thực hiện được không hay nếu có thể thì làm như thế nào?

— daniel smith
nguồn

174

Bạn có thể dễ dàng phát hiện các phím shift, alt và control từ các thuộc tính sự kiện;

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

Xem quirksmode để biết thêm thuộc tính. Nếu bạn muốn phát hiện các khóa khác, hãy xem câu trả lời của cletus .

— kkyy
nguồn

3

Tôi không thấy thuộc tính đó trên đối tượng Sự kiện jQuery: api.jquery.com/category/events/event-object

— cletus

1

Vâng, như trang này nói, "Hầu hết các thuộc tính từ sự kiện ban đầu đều được sao chép và chuẩn hóa sang đối tượng sự kiện mới." ctrlKey, altKey, v.v. là một phần của tiêu chuẩn ecmascript (xem liên kết đầu tiên trên trang jquery api đã nói ở trên), vì vậy (ít nhất là trong các trình duyệt tốt) đối tượng sự kiện thường cũng có các thuộc tính đó.

— kkyy

3

Chế độ Quirks chỉ cho biết chúng được xác định trong một sự kiện quan trọng .. không đề cập đến sự kiện chuột.

6

Bạn thậm chí có thể phát hiện phím lệnh của Mac OS X bằng cách sử dụng if (e.metaKey) alert('Command down'). Đây là một bài viết hay về các sự kiện chính trong JS unixpapa.com/js/key.html

— F Lekschas

48

Bạn cần theo dõi riêng trạng thái khóa bằng cách sử dụng keydown()và 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;
  }
});

Xem danh sách các mã khóa . Bây giờ bạn có thể kiểm tra rằng:

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

— cletus
nguồn

6

Một mặt trái của phương pháp này (không phải tôi biết cách tốt hơn) là nếu bạn đang phát hiện khóa ALT và người dùng ALT-Tab đến một cửa sổ khác, thì sự kiện keyup không được trình duyệt phát hiện vì nó xảy ra trên ứng dụng khác . Từ thời điểm đó, jquery nghĩ rằng khóa đã bị lỗi, cho đến khi họ nhập vào ứng dụng jquery của bạn. Điều này chỉ quan trọng với phím ALT, theo như tôi có thể tưởng tượng.

— Flat Cat

1

Đối với Mac OS X, đó sẽ là Cmd-Tab, nhưng tôi nghĩ rằng hiệu trưởng vẫn giữ

— murftown

1

Hoặc Ctrl + Tab để thay đổi tab của trình duyệt

— Seeven 21/09/17

9

Tôi đã có thể sử dụng nó chỉ với JavaScript

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

  function Show(event) {
            if (event.ctrlKey) { 
                 alert('Ctrl down');
            }
     }

— Arun Prasad ES
nguồn

1

Hơn nữa, tôi đã thực hiện một điều chỉnh nhỏ và một cây bút: codepen.io/vr_driver/pen/YRoRYO

— vr_driver

3

Không ăn cắp sấm sét của @Arun Prasad , đây là một đoạn mã JS thuần túy mà tôi đã tạo lại để dừng hành động mặc định, nếu không sẽ mở ra một cửa sổ mới nếu nhấn CTL + nhấp chuột.

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>

Mở rộng đoạn mã

— vr_driver
nguồn