evento di clic mancante per <span> all'interno dell'elemento <button> su firefox

Question

Sto riscontrando un problema con Firefox 32 quando associo l'azione all'evento click dell'elemento span all'interno di un elemento del pulsante. Altri browser sembra funzionare bene.

Qui il code illustrating the issue on jsFiddle.

<span onClick="alert('test');">**Working**</span><br> 
<button>inside a button <span onClick="alert('test');">**Not working**</span></button> 

Qualcuno sa perché e se si tratta di un bug o di una funzionalità?

Answer 1

Per quanto ho conosciuto cliccando gli elementi per bambini non funzionerà perché è annidato all'interno di un pulsante. Un pulsante non è un contenitore per elementi figlio - solo per il testo.

Se si prova come di seguito si dice sempre che si è fatto clic sul pulsante.

 <button type="button" onclick="alert('You clicked the button!');"> 
     inside a button <span onClick="alert('clicked span');">**Not working**</span> 
     </button> 

Quindi, il mio suggerimento è quello di utilizzare un altro arco o un div

 <div class="button_replace"> 
     inside a div <span onClick="alert('clicked span');">**working**</span> 
     </div> 

Speranza che aiuta ...

Nota: Il codice funzionerà in cromo, ma non in Firefox e il mio la risposta è una soluzione alternativa per la creazione di lavoro in firefox

Answer 2

Aggiungere un puntatore-evento al pulsante nel css come:

button span { 
 
    pointer-events: none; 
 
}

clic sull'elemento tasto saranno ignorate

Answer 3

È necessario aggiungere la proprietà pointer-events allo span elemento.

button span { 
    pointer-events: none; 
}