按钮上的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中运行良好,点击事件以正确的顺序捕获:首先在任何span元素上,然后事件冒泡到父按钮元素.

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

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

谢谢

Answer 1

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

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