Angular中如何检测DOM元素是否为另一DOM元素的子元素

核心思路 #

直接利用DOM原生的Element.contains()方法，检测触发事件的元素是否是模态框（.modal）的子元素（包括模态框自身），无需再通过添加/移除类来标记外部按钮，大幅简化逻辑。

实现代码 #

修改你的keyDownEvent方法如下：

@HostListener('window:keydown', ['$event'])
keyDownEvent(event: KeyboardEvent) {
  // 将事件目标转为HTMLElement类型
  const targetEl = event.target as HTMLElement;
  // 获取页面中的模态框元素
  const modalContainer = document.querySelector('.modal') as HTMLElement;

  // 先判断模态框是否存在，避免空值报错
  if (!modalContainer) return;

  // 检测目标元素是否在模态框内部
  const isInsideModal = modalContainer.contains(targetEl);

  // 如果目标是按钮且在模态框外，阻止交互（可根据需求调整逻辑）
  if (!isInsideModal && targetEl.tagName.toLowerCase() === 'button') {
    event.preventDefault();
    // 也可以直接禁用按钮：targetEl.disabled = true;
  }
}

说明 #

• Element.contains()方法会返回布尔值，判断目标元素是否是当前元素的后代（包括自身），完全满足你的检测需求。
• 无需再使用Renderer2操作按钮的类名，直接通过事件目标和模态框的关系判断即可。
• 可以根据实际业务场景调整后续逻辑：比如除了keydown事件，还可以监听click事件；或者只针对特定类型的按钮做处理。

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