Firefox中按钮内<i>标签点击事件失效，Chrome正常如何解决？

首先得揪出你代码里的一个小问题：$('button').not('i')这个选择器其实完全没起到过滤作用——<button>本身就不是<i>元素，所以它等价于直接选择所有按钮。这就导致点击子元素<i>时，哪怕你加了stopPropagation()，Firefox的事件模型（尤其是针对绝对定位子元素的处理逻辑）还是可能让事件冒泡到父按钮，触发它的点击事件。

给你两个靠谱的解决方案：

方案一：在按钮点击事件中判断点击目标 #

通过检查事件的target是否为按钮本身，只有点击按钮的非子元素区域时才触发按钮的逻辑：

// 按钮点击事件：仅当点击按钮本身时触发
$('button').click(function(e) {
  if (e.target === this) {
    alert('button was clicked');
  }
});

// 子元素<i>的点击事件：阻止冒泡并执行自己的逻辑
$('button i').click(function(e) {
  e.stopPropagation(); // 阻止事件冒泡到父按钮
  alert('i was clicked');
});

方案二：修正事件绑定逻辑并移除多余的preventDefault #

原来的e.preventDefault()对于<i>元素来说完全多余（<i>没有默认的点击行为，比如跳转、提交这类动作），移除它之后，stopPropagation()在Firefox里就能正常工作了：

// 直接绑定按钮点击事件（去掉多余的.not('i')）
$('button').click(function(){ 
  alert('button was clicked'); 
}); 

// 子元素点击事件：只保留stopPropagation
$('button i').click(function(e){ 
  e.stopPropagation(); 
  alert('i was clicked'); 
});

为什么Firefox里原来的代码失效？ #

Firefox对事件冒泡的处理在某些场景下（比如绝对定位的子元素）比Chrome更严格，多余的e.preventDefault()可能会干扰事件传播的逻辑，导致stopPropagation()没有按预期阻止事件冒泡到父元素。另外，错误的not('i')选择器让按钮的点击事件始终会被绑定，进一步加剧了问题。

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