如何阻止事件在子元素中触发？含input元素事件禁用需求

Hey there! Let's tackle your two event handling questions one by one with practical code examples tailored to your HTML/JS setup:

1. 阻止事件在子元素中被激活 #

这个问题核心是处理事件冒泡（事件从触发的子元素向上传播到父元素）。这里有两种常用且靠谱的方案：

方案一：在子元素事件中阻断冒泡 #

如果你的子元素本身绑定了事件，直接在子元素的事件处理函数里调用event.stopPropagation()，就能阻止事件向上传递到父元素：

<div class="parent-box">
  父区域
  <div class="child-box">子区域</div>
</div>

// 父元素事件
document.querySelector('.parent-box').addEventListener('click', () => {
  console.log('父元素事件触发');
});

// 子元素事件
document.querySelector('.child-box').addEventListener('click', (e) => {
  e.stopPropagation(); // 关键：阻止事件冒泡到父元素
  console.log('子元素事件触发，但父元素不会响应');
});

方案二：在父元素事件中判断触发目标 #

如果子元素没有单独绑定事件，你可以在父元素的事件处理逻辑里，通过event.target和event.currentTarget的对比，只在点击父元素本身时执行逻辑：

<div class="parent-box">
  父区域
  <div class="child-box">子区域</div>
</div>

document.querySelector('.parent-box').addEventListener('click', (e) => {
  // 只有当点击的是父元素本体时，才执行后续逻辑
  if (e.target === e.currentTarget) {
    console.log('父元素事件触发，点击子元素不会触发');
  }
});

2. 让事件不会在input元素中激活 #

这个需求可以通过在事件处理函数里先判断触发目标是否为input元素（或包含在input内），如果是就直接跳过逻辑执行：

方案一：直接判断目标标签 #

<div class="container">
  容器内容
  <input type="text" placeholder="点击我不会触发容器事件">
</div>

document.querySelector('.container').addEventListener('click', (e) => {
  // 检查点击目标是不是input，是就直接返回
  if (e.target.tagName.toLowerCase() === 'input') {
    return;
  }
  console.log('容器事件触发，点击input时不会执行');
});

方案二：兼容input嵌套的情况 #

如果input被其他元素包裹（比如带图标的输入框），可以用closest()方法判断点击目标是否属于input元素的范围：

<div class="container">
  容器内容
  <div class="input-wrapper">
    <span class="icon">🔍</span>
    <input type="text" placeholder="点击我或图标都不会触发容器事件">
  </div>
</div>

document.querySelector('.container').addEventListener('click', (e) => {
  // 判断点击目标是否在input元素内部或就是input本身
  if (e.target.closest('input')) {
    return;
  }
  console.log('容器事件触发，点击input或其包裹元素时不会执行');
});

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