这问题我之前也碰到过！核心原因是Firefox对HTML规范的遵循更严格——根据HTML标准，<button>元素内部其实不应该嵌套块级元素（比如<div>），虽然Chrome、Safari、IE都做了兼容处理，允许内部元素触发点击，但Firefox会拦截内部块级元素的点击事件，直接让按钮的点击事件触发。

给你两个可行的解决方案，根据你的需求选：

方案1：替换块级元素为行内元素（推荐，符合规范） #

把内部的<div>换成<span>，然后通过CSS设置display: block来保持原来的块级样式，这样既符合HTML规范，又能在Firefox中正常触发点击事件：

<button onclick="alert('expand');" class="button"> 
  <span onclick="alert('Edit');" class="edit">Edit</span><br/> 
</button>

对应的CSS（如果需要保持原DIV的样式）：

.edit {
  display: block;
  /* 其他原有样式 */
}

方案2：用事件委托处理（适合无法修改内部元素的情况） #

如果因为框架限制不能替换元素，可以给按钮添加事件监听，通过事件对象判断点击目标，手动触发Edit的逻辑，同时阻止事件冒泡避免触发按钮的expand事件：

// 获取按钮元素
const expandBtn = document.querySelector('.button');
expandBtn.addEventListener('click', function(e) {
  // 判断点击的目标是.edit元素
  if (e.target.classList.contains('edit')) {
    e.stopPropagation(); // 阻止事件冒泡到按钮
    alert('Edit');
  }
});

注意：如果用这个方法，建议移除原来<div>上的onclick属性，避免重复触发。

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