如何判断触发keydown事件的HTML元素是否为指定div的后代

我来帮你搞定这两个需求，其实有两种非常实用的原生JS方法可以轻松实现，下面分场景给你详细说明：

一、通用方法：判断一个元素是否为另一个元素的后代 #

1. 使用 Element.contains() 方法 #

这是最直接的方法，语法很简单：父元素.contains(子元素)，返回一个布尔值。注意：如果子元素就是父元素本身，这个方法也会返回true。

举个例子，判断你的#txt1是不是.div2的后代：

const parentDiv = document.querySelector('.div2');
const childInput = document.getElementById('txt1');
const isDescendant = parentDiv.contains(childInput); // 这里会返回true

2. 使用 Element.closest() 方法 #

这个方法更灵活，它会从当前元素开始向上遍历DOM树，寻找匹配指定选择器的祖先元素（包括自身），找到就返回该元素，找不到返回null。所以我们可以通过判断返回值是否存在来确定是否为后代。

同样用你的例子：

const childInput = document.getElementById('txt1');
const isDescendant = !!childInput.closest('.div2'); // 双重感叹号把结果转成布尔值，这里返回true

两种方法的区别：

• contains() 需要先获取到父元素的DOM对象，适合你已经拿到父元素引用的场景；
• closest() 可以直接用CSS选择器（类、ID、标签都可以），不用提前获取父元素，代码更简洁。

二、结合keydown事件的场景实现 #

在document的keydown事件中，event.target就是触发事件的元素，我们只需要把上面的方法套进来就行：

document.addEventListener('keydown', function(event) {
  const triggerElement = event.target;

  // 方法1：用contains判断
  const targetDiv = document.querySelector('.div2');
  if (targetDiv && targetDiv.contains(triggerElement)) {
    console.log('当前触发keydown的元素是.div2的后代');
    // 这里写你的业务逻辑，比如处理输入框的按键事件等
  }

  // 方法2：用closest判断（更简洁）
  if (triggerElement.closest('.div2')) {
    console.log('当前触发keydown的元素是.div2的后代');
    // 你的业务逻辑
  }
});

额外注意点 #

• 如果你的.div2可能不存在于DOM中，用contains()的时候一定要先判断targetDiv是否存在，避免报错；
• closest()方法在所有现代浏览器都支持，如果你需要兼容非常老的浏览器（比如IE11以下），可能需要用contains()或者polyfill，但现在一般不需要考虑了。

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