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事件处理，但它可能是一种更快捷的方式。

Answer 2

尝试更改

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

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

如果您将以下jQuery代码行添加到js中，这也应解决您的问题。确保在按钮之前添加代码＆gt; span click bind。

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

希望这有帮助。

-D

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

2 个答案: