按钮上的jQuery事件冒泡在Firefox中没有按预期工作

我有一个元素，其中有2个元素。 我为每个span元素都有2个附加的jquery click事件处理程序，所以我可以为每次点击做任何我喜欢的事情。 以下是基本代码的快速浏览：

HTML

Text1 Text2

使用Javascript

 $(function() { $('button').bind('click', function() { console.log('button clicked'); }); $('button > span:eq(0)').bind('click', function() { console.log('text1 span clicked'); }); $('button > span:eq(1)').bind('click', function() { console.log('text2 span clicked'); }); }); 

这一切在Chrome中运行良好，点击事件以正确的顺序捕获：首先在任何span元素上，然后事件冒泡到父按钮元素。

问题是在Firefox中，click事件不会触发任何span元素，只是按钮事件处理程序将事件记录为触发。

这是一个小提琴，所以你可以看到我的意思： http ： //jsfiddle.net/spider/RGL7a/2/

谢谢

Answer 1

一个简单的解决方案是使用

元素而不是按钮元素。 将要触发的公共代码放入函数中，然后在单击任一跨度时执行该函数以及跨度的唯一代码。 如果你想要更符合508，你可以将跨度转换为标签（甚至是标签。

显然，这并不能解释FF事件处理，但它可能是一种更快捷的方法。

Answer 2

尝试改变

   to  

这应该可以解决您的问题。 它不起作用的原因是因为它跟随一个按钮的默认动作，即提交。 即BUTTON需要在javascript中返回false才能读取您的点击。 就像您尝试单击链接而不设置其默认操作以返回false一样。

如果您将以下jQuery代码行添加到js中，这也应解决您的问题。 确保在按钮> span单击绑定之前添加代码。

希望这可以帮助。

-D