JavaScript的preventDefault绑定document生效但绑定指定div不生效如何解决

问题根因 #

普通div元素默认不支持获得键盘焦点，只有当前处于聚焦状态的节点才能接收键盘事件，因此你绑定在div上的keydown事件不会被触发。绑定在document、window上能够生效，是因为这两个全局对象可以接收所有冒泡上来的键盘事件。

可行解决方案 #

方案1：给div添加可聚焦属性，直接绑定事件 #

给目标div加上tabindex属性，让它具备聚焦能力，绑定的键盘事件即可正常触发：

修改后的HTML代码

<div id="ye" tabindex="0">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

JS代码（可选拓展）

const targetDiv = document.getElementById("ye");
// 可选：页面加载后自动聚焦该div，无需用户手动点击就能触发事件
targetDiv.focus();
targetDiv.addEventListener("keydown", function (e) {
  e.preventDefault();
});

补充说明：tabindex="0"代表元素可以通过Tab键导航聚焦，如果你不希望它被Tab键选中，可以设置为tabindex="-1"，仅支持通过JS调用focus()或者用户点击元素来触发聚焦。

方案2：全局绑定事件，触发时判断目标范围 #

不需要修改div属性，依旧在全局绑定事件，仅当事件来源于目标div内部时才阻止默认行为，无需考虑聚焦问题，适用范围更广：

const targetDiv = document.getElementById("ye");
document.addEventListener("keydown", function (e) {
  // 判断当前触发事件的元素是否在目标div内部
  if (targetDiv.contains(e.target)) {
    e.preventDefault();
  }
});

内容的提问来源于stack exchange，提问作者Autumnlight