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

Posted 2023-05-07

【中文标题】按钮上的 jQuery 事件冒泡在 Firefox 中无法按预期工作

【英文标题】：jQuery event bubbling on button not working as expected in Firefox

【发布时间】：2012-01-01 12:54:23

【问题描述】：

我有一个 <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/

谢谢

【问题讨论】：

我猜这一直没有解决？

@Shane 不幸的是，没有，据我所见，它可能永远不会，因为这在最新的 Firefox 版本中仍然不起作用。像 Bootstrap 这样的框架通过使用 two separate buttons 来实现这一点。而像 Foundation 或 YUI 这样的其他框架只是完全使用其他标记来模拟这个 split button 功能（Foundation Example 和 YUI Example）。

我通常使用 Boostrap 来实现这种功能，如果这不是一个选项，我会使用他们的策略，因为它在标记语义方面似乎是最好的。

我不情愿地切换到 div.button。这些按钮需要相互嵌套。我本可以将按钮放在顶部，但是我有一个模块结构，可以传递视图对象并期望每个模块有一个父级，这个父级是一个按钮，等等。角落案例！呵呵

【参考方案1】：

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

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

【讨论】：

感谢 Ben 的建议。是的，您所说的是该问题的替代解决方案，我知道并且有效。我仍然喜欢（如果可能的话）使用button 而不是div 作为父元素，因为拥有一个具有2个动作（一个主要和一个次要）的按钮似乎更具可读性和语义正确性，而不是拥有一个div里面有 2 个按钮。特别是因为我的 css 规则将其样式设置为我的任何常规（单个操作）按钮，只是由垂直分隔符分隔。如果我找不到任何解决方案，我将不得不做出妥协并使用 div。再次感谢

【参考方案2】：

尝试改变

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

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

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

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

希望这会有所帮助。

-D

【讨论】：

感谢您的建议，但它们都没有解决问题（在发布问题之前我自己尝试了type="button"，但没有将其合并到我的示例中，因为它没有任何区别）。问题似乎是在 Firefox 上，点击事件仅被 button 元素捕获，而不被任何子元素捕获。