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

Question

当我在按钮元素内绑定span元素的click事件时,我遇到了Firefox 32的问题.其他浏览器似乎运行良好.

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

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

有人知道为什么,如果它是一个错误或功能？

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中工作的替代解决方案

Answer 2

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

button span {
  pointer-events: none;
}

Answer 3

在 css 中为您的按钮添加一个指针事件，例如：

button span {
    pointer-events: none;
}

单击按钮元素将被忽略