内嵌button的Label点击时不触发按钮事件的正确处理方法

这是<label>元素的原生默认行为导致的：点击label范围内的非交互内容（比如纯文本）时，浏览器会自动查找label内部/关联的第一个可交互元素，主动触发它的点击事件，所以你点"Label"文字的时候，会自动触发里面Remove按钮的事件。

下面给两种可直接落地的方案，按需选择即可：

方案1：纯JS实现（不用改原有HTML结构，优先推荐） #

逻辑非常简单：给label绑定点击事件，判断点击的目标，如果点的是label本身（也就是文字区域，不是按钮），直接阻止默认行为就行，完全不影响按钮本身的正常点击。

const label = document.querySelector('label');
label.addEventListener('click', e => {
  if (e.target === label) {
    e.preventDefault();
    // 这里写你点击Label文本需要执行的自定义逻辑即可
    console.log('点击了Label文字，不会触发按钮事件');
  }
});

// 按钮本身的事件完全不受影响，按原有业务逻辑写就行
const removeBtn = document.querySelector('label button');
removeBtn.addEventListener('click', () => {
  console.log('点击了Remove按钮，事件正常触发');
});

注意：不要直接在label的点击事件里全局调用e.stopPropagation()或者e.preventDefault()，会导致内部按钮的正常点击也被拦截，必须加e.target的判断，只拦截点在label本身的事件。

方案2：纯CSS实现（无JS逻辑，需要极小改动HTML） #

核心是用pointer-events控制事件响应，把label的文本单独包一层，让文本区域的事件不会触发label的默认关联逻辑。
先把原来的纯文本节点包个span，整体结构几乎没有变化：

<label>
  <span class="label-content">Label</span>
  <button>Remove</button>
</label>

加两行CSS即可生效：

.label-content {
  pointer-events: none;
}
label {
  cursor: pointer;
}

这个方案兼容性覆盖所有现代浏览器，不需要写一行JS，点击按钮的行为完全正常，点击文字也不会误触发按钮事件。如果需要给Label加点击交互，直接把事件绑在label元素上即可。

避坑提醒 #

别直接给label加全局pointer-events: none，会导致里面的按钮也点不了；也别一上来就阻止label上所有的点击默认行为，会把按钮本身的正常点击也拦掉。

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