點擊後不再觸發Keydown事件

我有一個網站，我想對箭頭鍵事件做出反應。我添加了一個監聽器，只要我不點擊該站點，監聽器就會工作。點擊後，不再被觸發。點擊後不再觸發Keydown事件

由於行爲是相同的Chrome和Firefox我懷疑我失去了一些東西。

繼源代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      html, body, embed 
      { 
       position: absolute; 
       width: 100%; 
       height: 100%; 
       margin: 0px; 
       padding: 0px; 
       border: 0px; 
      } 
     </style> 
     <script>  
      var keyHandler = function(event) { 
       alert("EV" + event); 
      }; 
      window.addEventListener('keydown', keyHandler, true); 
     </script> 
    </head> 
    <body> 
     <embed src="http://upload.wikimedia.org/wikipedia/commons/6/6b/Bitmap_VS_SVG.svg"/> 
    </body> 
</html>

可能有人指出，有什麼我失蹤？

來源

2012-11-13 abergmeier

你試過document.addEventListener？（未經測試） –

'document.addEventListener'具有完全相同的行爲。 – abergmeier

你有jQuery嗎？或願意使用它？有一個可以接受的解決方案，使用這個 –

問題是，您正在使用整個視口的embed元素。嵌入元素用於將多媒體嵌入到您的網站中。一旦焦點移動到該元素（通過點擊），它就會劫持你的事件。

你可以在這裏看到這個動作：http://jsfiddle.net/blineberry/p6rXP/點擊結果窗口，但不是在圖像上，然後按下一個鍵。然後點擊圖像並按下一個鍵。然後點擊圖像並按下一個鍵。

如果使用img元素，而不是一個embed的問題得到解決：http://jsfiddle.net/blineberry/p6rXP/1/

來源

2012-11-13 18:39:56 Brent

然後，我還可以添加eventHandlers到svg中的元素嗎？ – abergmeier

布倫特的答案給你這樣做的理由和乾淨的解決方案，我會給你的情況下，原油替代方法無法停止使用embed標籤。

這就是在嵌入視口上方放置一個不可見的跨度或div元素，這樣當用戶點擊嵌入內容時，他們將真正點擊隱藏元素，這樣焦點就不會轉移到embededd元素，所以您的window.keydown處理程序將被解僱。

有關此解決方法的示例代碼，請參閱https://stackoverflow.com/a/9614949/352672。

來源

2012-11-13 18:53:59 Nelson

因爲我想添加事件處理程序來點擊SVG，所以這不是一個真正的選項： – abergmeier

我最終做的是將外部SVG加載到文檔主體中。然後整個問題消失（而其他的表面）。隨着的jQuery這看起來像這樣：

<body> 
    <script> 
     $(document.body).load("mygreat.svg"); 
    </script> 
</body>

來源

2012-11-17 13:52:43 abergmeier

點擊後不再觸發Keydown事件

回答

相關問題