evento Click para el elemento anidado dentro de un botón

Aquí es un simple ejemplo del problema:evento Click para el elemento anidado dentro de un botón

<body> 
    <button id="parent" onclick="alert('parent')"> 
     <span id="child" onclick="alert('child')">Authenticate</span> 
    </button> 
</body>

En Chrome esta alerta "niño" y luego "padre", pero en IE/FF Sólo tenemos "Padre" .

Claramente, esto se puede solucionar de varias maneras (cambiar el botón a div, eliminar lapso, etc.), pero quería averiguar si había una manera de hacer que esto funcionara (es decir, alertar "hijo") sin cambiar el HTML.

Gracias!

PD: Intenté JQuery y eso tiene el mismo comportamiento.

Fuente

2012-06-17 Noel Abrahams

Suena como en un navegador, el evento se propaga a la parte superior, en el otro no. O algo así ... No soy un experto en el 'evento burbujeante', pero ese es el término de búsqueda que creo que dará resultados. –

@JonathanNicol, esto no es un evento burbujeante, es un túnel de eventos. –

Poner un elemento seleccionable dentro de un '

Como dijo @muistooshort, manejar eventos de clics dentro de otros eventos de clics no parece natural. También creo que tienes que reconsiderar tu diseño.

Dicho esto, usted puede manejar un solo evento click en su contenedor principal y luego comprobar qué elemento era la fuente del clic

Este sería el camino a seguir, teniendo en cuenta su caso de uso, la OMI:

$('your-button-container').click(function(event){ 
    console.log(event.originalEvent.srcElement); 
});

Realice las comprobaciones necesarias en event.originalEvent.srcElement y actúe en consecuencia.

Editar: No usar jQuery, sería algo así:

yourButtonContainer.addEventListener(function(event){ 
    console.log(event.srcElement); 
});

Fuente

2014-10-02 15:14:25

Como se ha mencionado por algunos usuarios, no es una buena práctica a los botones de nido por el estilo, pero para fines educativos, que 'd hacerlo de esta manera:

HTML:

<body> 
    <button id="parent" onclick="callFn(event, 'parent')"> 
    <span id="child" onclick="callFn(event, 'child')">Authenticate</span> 
    </button> 
</body>

JS:

window.callFn = function(evt, type) { 
    if (type === 'child') { 
    alert(type); 
    } 
}

JS violín: https://jsfiddle.net/4vo3arpf/4/

Fuente

2016-10-19 21:08:48 satJ

evento Click para el elemento anidado dentro de un botón

Respuesta

Cuestiones relacionadas