如何將事件偵聽器綁定到特定的div元素？

Question

我正在編寫一個腳本，該腳本基於綁定到document的事件（當前/向下）執行一些操作（此刻）。

當同時按下某個鍵和shift-key(eg shift + a) ，將觸發某些動作。

除了我想將事件偵聽器綁定到特定的div元素之外，它是有效的。

如果我具有以下HTML內容，為什么無法使用id屬性將事件偵聽器綁定到最外面的div元素？

<div id="some-id" style="position: absolute; left: 0px; top: 0px;">
  :
  <div style="width: 100%; height: 100%; position: relative; left: 0px; top: 0px; padding: 0px; margin: 0px;">
    :
    <div style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; padding: 0px; margin: 0px;">
      :
    </div>
  </div>
</div>

Answer 1

這是因為您的div是空的，因此它沒有任何寬度或高度，因此任何div上都不會觸發任何事件。 嘗試向div添加一些內容。 或嘗試設置任何最里面的div的min-height和min-width屬性。

 document.getElementById('some-id').addEventListener('click', () => { console.log('The click is working') }) 

 <div id="some-id" style="position: absolute; left: 0px; top: 0px;"> <div style="width: 100%; height: 100%; position: relative; left: 0px; top: 0px; padding: 0px; margin: 0px"> <div style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; padding: 0px; margin: 0px; min-width: 100vw; min-height: 100vh"> </div> </div> </div> 

Answer 2

• 將tabindex設置為div zero
• Focus控制Focus放在文檔加載上的div上
• 向下/向上捕獲鍵

嘗試在下面運行演示：

 $(document).ready(function(){ $("#some-id").focus(); shifted = false; $("#some-id").bind("keydown keyup", function(e) { switch(e.type) { case "keydown": console.log(e.key); if (e.key === "Shift") { shifted = true; } break; case "keyup": console.log(e.key); if (e.key === "A" && shifted === true) { console.log("Do your action") } shifted = false; break; } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="some-id" style="height: 200px; width: 200px; border: solid 1px" tabindex="0" > my div </div>