缺少 <span> 的点击事件里面<按钮>Firefox 上的元素 [英] Missing click event for <span> inside <button> element on firefox

问题描述

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

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

<span onClick="alert('test');">**工作**</span><br><button>按钮内<span onClick="alert('test');">**不工作**</span></button>

有人知道原因吗?是错误还是功能?

解决方案

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

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

在按钮内 <span onClick="alert('clicked span');">**不工作**</span></button>

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

在 div 内 <span onClick="alert('clicked span');">**working**</span>

希望能帮到你...

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

I am experiencing problem with Firefox 32 when I bind action on click event of span element inside a button element. Other browsers seems to works well.

Here the code illustrating the issue on jsFiddle.

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

Does anybody know why and if it's a bug or a feature ?

解决方案

As far as i known clicking the children elements won't work because it is nested inside a button. A button is not container for child elements - only for text.

If you try like below it always tell that you clicked the button.

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

So, my suggestion is to use another span or a div

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

Hope it helps...

Note: Your code will work in chrome but not in firefox and my answer is alternative solution for making work in firefox

这篇关于缺少 <span> 的点击事件里面<按钮>Firefox 上的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！