Firefox 上 <button> 元素内的 <span> 缺少点击事件

Question

当我在 button 元素内的 span 元素的单击事件上绑定操作时，我遇到了 Firefox 32 的问题。其他浏览器似乎运行良好。

这里的 代码说明了 jsFiddle 上的问题。

 <span onClick="alert('test');">**Working**</span><br>
<button>inside a button <span onClick="alert('test');">**Not working**</span></button>

有谁知道为什么以及它是错误还是功能？

原文由 Jrmi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

据我所知，单击子元素将不起作用，因为它嵌套在按钮内。按钮不是子元素的容器——仅用于文本。

如果你像下面那样尝试，它总是告诉你点击了按钮。

 <button type="button" onclick="alert('You clicked the button!');">
   inside a button <span onClick="alert('clicked span');">**Not working**</span>
</button>

所以，我的建议是使用另一个 span 或 div

 <div class="button_replace">
  inside a div <span onClick="alert('clicked span');">**working**</span>
</div>

希望能帮助到你…

注意：您的代码可以在 chrome 中运行，但不能在 firefox 中运行，我的回答是在 firefox 中运行的替代解决方案

原文由 SDK 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您必须将 pointer-events 属性添加到 span 元素。

 button span {
  pointer-events: none;
}

原文由 marco-s 发布，翻译遵循 CC BY-SA 3.0 许可协议