jQuery evento burbujeo en el botón no funciona como se esperaba en Firefox

Question

Tengo un elemento <button> dentro del cual tengo 2 elementos <span>. Tengo 2 manejadores de eventos de clic de jquery adjuntos para cada uno de los elementos de tramo, así puedo hacer lo que quiera por cada clic. He aquí un vistazo rápido del código básico:

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'); 
    }); 
}); 

Esto es todo funciona bien en Chrome y el evento click se captura en el orden correcto : primero en cualquiera de los elementos de intervalo y luego el evento burbujea hasta el elemento de botón principal.

El problema es que en Firefox el evento de clic no se activa para ninguno de los elementos de intervalo, solo el controlador de eventos de botón registra el evento como disparado.

Aquí es un violín para que pueda ver lo que quiero decir: http://jsfiddle.net/spider/RGL7a/2/

Gracias

Answer 1

Una solución sencilla sería utilizar un elemento <div> en lugar de un elemento de botón. Ponga el código común que desea disparar en una función y luego ejecute la función cuando se hace clic en cualquiera de los tramos, así como el código único del tramo. Si quería ser más 508. usted podría hacer los tramos en <a> tags (etiquetas o incluso <button>.

Obviamente, que no explica el manejo de eventos FF pero podría ser una manera más rápida para ir.

Answer 2

intente cambiar

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

Esto debería resolver su problema de buenas a primeras. la razón por la que no trabaja es porque su seguir adelante con la acción predeterminada de un botón, que es someter. es decir bOTÓN tendría que devolver false en el Javascript para que lea su clic. Como si tratara de hacer clic en un enlace con configurando su acción predeterminada para devolver falso.

Si agrega la siguiente línea de código jQuery a su js, esto también debería resolver su problema. Asegúrese de agregar el código antes de su botón> span click bind.

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

Espero que esto ayude.

-D