能否在button标签内嵌入可独立运作的checkbox控件？

嘿，你碰到的这个问题本质是事件冒泡机制在搞鬼！当点击button里的checkbox时，事件会从checkbox这个子元素顺着DOM树向上冒泡，被外层的button捕获，所以才会出现checkbox的事件被父按钮接管的情况。要实现点击checkbox只触发自身事件、改变状态，同时不触发button的点击，点击button其他区域正常响应的效果，这里有两种实用方案：

方案一：在Checkbox事件中阻止冒泡 #

我们可以在checkbox的点击和变更事件里，调用event.stopPropagation()来阻止事件继续向上传播到button。而且浏览器默认会先处理checkbox的状态切换，再触发事件，所以不需要额外做状态处理：

const button = document.getElementById('button');
button.onclick = evt => { alert('Button clicked') };

const checkbox = document.getElementById('checkbox');
checkbox.onclick = evt => {
  evt.stopPropagation(); // 阻止事件冒泡到button
  alert('Checkbox clicked');
};
checkbox.onchange = evt => {
  evt.stopPropagation();
  alert('Checkbox changed');
};

对应的HTML保持你的写法就行：

<button id="button" style="width: 150px;"> 
  ClickMe 
  <input type="checkbox" id="checkbox" style="float: right;" /> 
</button>

方案二：在Button事件中过滤触发源 #

另一种思路是在button的点击事件里，判断触发事件的元素是不是checkbox——如果是，就跳过button的逻辑：

const button = document.getElementById('button');
button.onclick = evt => {
  // 点击的是checkbox？那直接返回，不执行button的逻辑
  if (evt.target.id === 'checkbox') return;
  alert('Button clicked');
};

const checkbox = document.getElementById('checkbox');
checkbox.onclick = evt => { alert('Checkbox clicked') };
checkbox.onchange = evt => { alert('Checkbox changed') };

这种方式不用修改checkbox的事件处理，只在button层面做过滤，同样能达到效果。

小提醒 #

顺便说一句，HTML标准其实不推荐在button里嵌套交互式控件（比如checkbox、input这些），不过如果是业务需求必须这么做，上面的方案都能解决问题。要是你用的是React、Vue这类框架，核心逻辑也是一样的，只是写法会稍微调整一下~

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