jquery về sự kiện nhấn phím bấm hai lần

Question

Tôi đang làm việc trên trình phát video và tôi muốn kiểm soát một số tác vụ video cơ bản như phát, tạm dừng, tìm kiếm qua bàn phím. Vì vậy, đây là mã mà tôi đang sử dụng để nhận các sự kiện bàn phím.

$("#video_container_div").on("keypress", function (e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    switch (e.which) { 
    case 32: 
     { // space 
      console.info("I am in keyboard controls"); 
      $("#playpausebtn").click(); 
      break; 
     } 
    default: 
     return; 
    } 
}); 
$("#fullscreenbtn").click(function() { //bind click event on fullscreen button 
    console.info("I am in fullscreen") 
    fullscreenFun(); 
}); 

Bây giờ vấn đề tôi đang gặp phải là nếu người dùng nhấp vào nút toàn màn hình và sau đó nhấn phím cách, sự kiện được bắn hai lần. http://202.164.44.244/products/trunk/video_player/sample1.htm Đầu tiên, phát/tạm dừng video sau đó tự động kích hoạt toàn màn hình hoặc bất kỳ sự kiện được tập trung cuối cùng nào.

Nếu tôi nhấn nút toàn màn hình và sau đó thanh không gian sau đó an ủi màn hình này:

I am in fullscreen 
I am in keyboard controls 
I am in fullscreen 

Trong một đống câu hỏi ai đó đã cho câu trả lời này của vấn đề tương tự

https://stackoverflow.com/a/17936661/1652512

Dưới đây là liên kết của trình phát:

http://202.164.44.244/products/trunk/video_player/sample1.htm 

Nhưng tôi cần giải pháp cụ thể về điều này. Vấn đề đã mất cả ngày của tôi.

Answer 1

Chỉnh sửa cuối cùng: Xin lỗi bạn đã mất một chút, nửa đêm và tôi hơi mệt.

Bạn đang sử dụng sự kiện sai! Bỏ qua những gì tôi đã nói về tiêu điểm và chỉ cần thay thế "keypress" bằng "keydown" và nó sẽ hoạt động tốt. Tiêu điểm sẽ vẫn ở trên toàn màn hình nhưng sự kiện của bạn sẽ hoạt động bình thường và e.stopPropagation() sẽ đủ để ngăn sự kiện kích hoạt nhiều lần. Mã của bạn nên đọc:

$("#video_container_div").on("keydown", function (e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    switch (e.which) { 
     case 32: 
     { // space 
      console.info("I am in keyboard controls"); 
      $("#playpausebtn").click(); 
      break; 
     } 
     default: 
      return; 
    } 
}); 
$("#fullscreenbtn").click(function() { //bind click event on fullscreen button 
    console.info("I am in fullscreen") 
    fullscreenFun(); 
}); 

Tôi nghĩ có điều gì đó lạ về bạn khi sử dụng stopPropagation tại sự kiện kích hoạt nhiều lần.

Điều đáng lưu ý ở đây là điều này sẽ chỉ kích hoạt khi video_container_div hoặc một phần tử bên trong nó được lấy nét. "keydown" và "keypress" yêu cầu tập trung kích hoạt mà không cần sử dụng JavaScript (bạn có thể gọi .trigger("keydown") nếu bạn muốn ví dụ). Nếu ai đó tập trung vào một yếu tố khác trên trang hoặc vừa mới mở trang (không tập trung gì) thì sự kiện "keydown" sẽ không kích hoạt.

---

Khi bạn nhấp vào nút toàn màn hình mà sau đó đặt các nút toàn màn hình lấy nét, vì vậy khi bạn nhấn spacebar nó gây ra trên cả hai sự kiện bấm phím bạn đã thực hiện và được tính là một nhấp chuột bởi nhiều trình duyệt xem xét một không gian hoặc nhập nhấn phím để nhấp chuột khi có nội dung nào đó được lấy nét.

Hãy thử thêm

$("#video_container_div").focus(); 

Để kết thúc bạn

$("#fullscreenbtn").click(function() { 

tổ chức sự kiện để loại bỏ tập trung từ các yếu tố fullscreenbtn và xem nếu nó vẫn gây ra hai lần.

EDIT: Nhìn vào mã chính xác trên trang web của bạn và tôi thêm này và nó làm việc cho tôi

$(h + t.$fulScrnBtn).click(function() { //bind click event on fullscreen button 
    fullscreenFun(); 
    $(h + t.$plyBtn).focus(); 
}); 

Lý do này đang làm việc không phải là cuối cùng những gì bạn muốn tuy nhiên. Tất cả điều đó có nghĩa là đặt nút phát/tạm dừng trong tiêu điểm để khi ai đó nhấn thanh dấu cách, trình duyệt sẽ tính đó là nhấp chuột vào nút, không phải vì ai đó đã nhấn không gian trong khi tập trung vào video.