stopPropagation阻止父元素click事件失效问题排查与解决

为什么点击span时label的click事件会触发，且e.target是input？ #

这是浏览器针对<label>元素的原生默认行为：当<label>包含或通过for属性关联了一个<input>，点击label范围内的任何元素（包括你的可编辑span），浏览器会自动将点击事件的目标指向关联的input，同时触发input的focus事件，并且label的click事件会被触发——哪怕你在span上调用了stopPropagation()，这个浏览器的原生关联行为还是会让label的click事件被唤起，而且target被替换成了input。

解决方案：两种方式实现需求 #

方式1：在span的click事件中彻底阻止事件传递与默认行为

修改span的click事件处理函数，同时调用stopPropagation()和preventDefault()，前者阻止事件冒泡到label，后者阻止浏览器触发label关联input的默认聚焦行为：

$quantitySpan
 .on('click', e => {
 e.stopPropagation(); // 阻止事件冒泡到父元素
 e.preventDefault();  // 阻止浏览器触发label关联input的默认聚焦行为
 console.log('span clicked');
 })
 // 保留后续的keyup、blur事件处理逻辑
 .on('keyup', () => {
 $quantityTextbox.val($quantitySpan.text());
 })
 .on('blur', () => {
 const textVal = $quantitySpan.text();
 if (isNaN(textVal) || textVal === '') {
 $quantitySpan.text("0");
 $quantityTextbox.val("0");
 }
 });

方式2：在label的click事件中判断实际点击元素

如果你需要保留label的其他点击逻辑，可以通过e.originalEvent.target获取实际点击的原始元素（因为jQuery的e.target被浏览器替换成了input），判断如果点击的是span，则跳过后续逻辑并阻止默认行为：

$quantityHolder.on('click', (e) => {
  // 获取真实点击的元素，绕过浏览器对label-target的替换
  const actualClickedElement = e.originalEvent.target;
  if ($(actualClickedElement).hasClass('quantity-span')) {
    e.preventDefault();
    return; // 跳过后续逻辑
  }
  // 这里保留你原本的label点击逻辑
  console.log(e.target, e.currentTarget);
});

额外建议 #

如果你的需求是让span成为主要的交互入口，也可以考虑将input从label标签中移出，手动通过for属性关联（但这样可能需要调整样式），不过上面两种方式已经能解决当前问题。

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