禁用网页键盘方向键

Question

我想禁用网页上键盘的左右箭头键，以防止滚动到上一张或下一张幻灯片。

我有这个代码：

jQuery(document).ready(function( $ ){  

document.onkeydown = function(e) {
  if (e.keyCode == 39 ) {
    alert('Not allowed');
     event.preventDefault();
    e.stop();
  }
    if (e.keyCode == 37 ) {
    alert('Not Allowed!');
    event.preventDefault(); 
    e.stop();
  } 
};
});

这是有效的：当我单击箭头键时，该网站会显示警报，然后当我关闭它时，它的右键会执行任何操作（所以我停留在当前幻灯片上）。

问题是当我禁用警报时：在这种情况下，当我单击右键或左键时，网站会转到下一张或上一张幻灯片，忽略键盘的块。

有什么建议吗？ 谢谢

Answer 1

正确的方法是这样的

document.addEventListener('keydown',keydown,true);    
function keydown(e){
    switch(e.key){
      case 'ArrowLeft'    :
      case 'ArrowRight'   :
            e.stopImmediatePropagation();
            e.preventDefault();  
    } // switch  
} // keydown

无需等待文档准备就绪或任何其他操作，您可以直接运行它

var $ = sel = >document.querySelector(sel);
var adj = (sel, prop, v) = >{
    var node = $(sel);
    var value = node.style[prop];
    value = value || 0;
    value = parseInt(value) + v;
    node.style[prop] = value + 'px';
  }

  document.addEventListener('keydown', keydown, true);

  function keydown(e) {
    if ($('#chk').checked == false) return;
    switch (e.key) {
    case 'ArrowLeft':
    case 'ArrowRight':
      e.stopImmediatePropagation();
      e.preventDefault();
    } //switch
  } //keydown

  body {
  margin:25px
}
#box {
  position:relative;
  height:50px;
  background:lightblue
}
#slider {
  position:absolute;
  width:50px;
  height:100%;
  background:lightgreen;
  margin:2
}
#chk-root {
  display:flex;
  align-items:center;
  margin:10px 0;
}
input {
  width:25px;
  height:25px;
  cursor:pointer;
  margin:0
  10px
}
label {
  font-size:20px;
  cursor:pointer
}

<div>
  click blue box then arrows to slide
</div>
<div id=chk-root>
  <label for=chk>
    enabled
  </label>
  <input id=chk type=checkbox>
</div>
<div id=box tabindex=-1>
  <div id=slider>
    </slider>
  </div>
</div>
<script>
  $('#box').onkeydown = e = >{
    if (e.key == 'ArrowLeft') adj('#slider', 'left', -5);
    if (e.key == 'ArrowRight') adj('#slider', 'left', 5);
  };
</script>