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

Question

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

HTML

<button>
    <span>Text1</span>
    <span>Text2</span>
</button>

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 中一切正常，并且按正确的顺序捕获 click 事件：首先在任何 span 元素上，然后事件冒泡到父按钮元素。

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

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

谢谢

Answer 1

一个简单的解决方案是使用<div> 元素而不是按钮元素。将您想要触发的通用代码放入一个函数中，然后在单击任一跨度时执行该函数以及该跨度的唯一代码。如果您想更符合 508 标准，可以将跨度设置为 <a> 标签（甚至是 <button> 标签。

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

Answer 2

尝试改变

    <button> to <button type="button">

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

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

     <script type="text/javascript">
        $(function() {
            $('button').click(function(){
                 return false
            });
        });
     </script>          

希望这会有所帮助。

-D