jQuery的事件冒泡按钮未正常工作在Firefox [英] jQuery event bubbling on button not working as expected in Firefox

问题描述

我有一个＆LT;按钮＆GT;跨度＆GT; 元素中，而我有2个＆LT 元素。我有2个附加jQuery的单击事件处理程序为每个span元素，所以我可以做任何我喜欢的每次点击。这里是基本的code的快速浏览一下：

I have a <button> element inside of which I have 2 <span> elements. I have 2 attached jquery click event handlers for each of the span elements so I can do whatever I like for each click. Here's a quick look of the basic code:

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事件在正确的顺序捕获：第一个在任何跨度元素，然后将事件冒泡到父按钮元素

This is all working fine in Chrome and the click event is captured in the correct order: first on any of the span elements and then the event bubbles up to the parent button element.

问题是，在Firefox中点击事件不会触发任何跨度元素，只是按钮的事件处理程序记录该事件为被解雇。

The problem is that in Firefox the click event does not fire for any of the span elements, just the button event handler logs the event as being fired.

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

Here's a fiddle so you can see what I mean: http://jsfiddle.net/spider/RGL7a/2/

感谢

推荐答案

一个简单的解决办法是使用＆LT; D​​IV＆GT; 元素，而不是一个按钮元素。把普通code你想射进一个函数，然后执行无论是横亘在单击时以及跨度的独特code的作用。如果你想更508兼容，你可以使跨度为＆LT; A＆GT; 标签（甚至＆LT;按钮＆GT; 标记。

A simple solution would be to use a <div> element instead of a button element. Put the common code you want fired into a function and then execute the function when either of the spans are clicked as well as the span's unique code. If you wanted to be more 508 compliant you could make the spans into <a> tags (or even <button> tags.

显然，这并不能说明FF事件处理，但它可能是去一个快捷的方法。

Obviously, that doesn't explain FF event handling but it might be a quicker way to go.

这篇关于jQuery的事件冒泡按钮未正常工作在Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！