Question

我正在编写一个脚本，该脚本基于绑定到document（此刻）的事件（keydown / up）执行一些操作。

与shift-key(e.g 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在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>

如何将事件侦听器绑定到特定的div元素？

2 个答案: