Safari中label嵌套input触发checkbox切换的兼容问题解决

这个问题我之前也踩过坑，Safari对<label>元素的事件冒泡逻辑和Chrome、Firefox不一样：当你点击<label>内部的交互式元素（比如你这里的数字输入框）时，Safari会把点击事件冒泡到外层的<label>，进而触发关联的<checkbox>状态切换，而Chrome和Firefox会自动阻止这种冒泡，优先处理内部输入框的交互。

下面给你几个可行的解决方案：

方案1：阻止内部输入框的事件冒泡 #

给嵌套的数字输入框添加点击事件，阻止事件向上冒泡到<label>，这样就不会触发checkbox的状态切换了。

原生JavaScript实现：

document.getElementById('qty').addEventListener('click', function(e) {
  e.stopPropagation();
});

如果用jQuery的话：

$('#qty').on('click', function(e) {
  e.stopPropagation();
});

方案2：调整HTML结构（推荐） #

从根源上避免在<label>内部嵌套交互式元素，把checkbox、数字输入框和label放在同一层级，用CSS来实现视觉上的包裹效果，这样就不会有浏览器兼容性问题了。

修改后的HTML示例：

<div class="checkbox-container">
  <input type="checkbox" name="xyz" id="xyz">
  <input type="number" name="qty" id="qty">
  <label for="xyz">This is my label for xyz checkbox...</label>
</div>

然后你可以用CSS（比如Flexbox）来排版，让它们看起来和原来的布局一致：

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

方案3：利用CSS的pointer-events属性（慎用） #

给内部的数字输入框设置pointer-events: auto;，同时给<label>设置pointer-events: none;，但这样会导致点击label文本时也无法触发checkbox切换，所以需要额外给checkbox和label文本单独处理，不如前两种方案稳妥，不推荐优先使用。

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