evento Click per Element nidificato all'interno di un pulsante

Ecco un semplice esempio del problema:evento Click per Element nidificato all'interno di un pulsante

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

In Chrome questo avvisa "bambino", quindi "padre", ma in IE/FF abbiamo solo "Parent" .

Chiaramente questo può essere risolto in diversi modi (cambia pulsante per div, rimuovi span ecc.), Ma volevo sapere se c'era un modo per farlo funzionare (cioè avvisare "bambino") senza cambiare l'HTML.

Grazie!

PS: provato JQuery e ha lo stesso comportamento.

fonte

2012-06-17 Noel Abrahams

Suona come in un browser caso bolle verso l'alto, in altri no. O qualcosa del genere ... Non sono un esperto nell '"evento che bolle", ma quello è il termine di ricerca che penso produrrà risultati! –

@ JonathanNicol, questo non è un evento che bolle, è il tunneling degli eventi. –

Mettere un elemento cliccabile all'interno di un '

Come ha detto @muistooshort, la gestione degli eventi di clic all'interno di altri eventi di clic sembra innaturale. Penso anche che devi ripensare al tuo design.

Detto questo, è possibile gestire un singolo evento click sul vostro contenitore principale e quindi controllare quale elemento era la fonte del click

Questa sarebbe la strada da percorrere, tenendo conto vostro caso d'uso, imo:

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

Effettuare i controlli necessari su event.originalEvent.srcElement e agire di conseguenza.

Edit: Non usando JQuery, sarebbe andata in questo modo:

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

fonte

2014-10-02 15:14:25

Come accennato da alcuni utenti, non è buona norma pulsanti nido del genere, ma per scopi didattici, ho 'd fare in questo modo:

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 Fiddle: https://jsfiddle.net/4vo3arpf/4/

fonte

2016-10-19 21:08:48 satJ

evento Click per Element nidificato all'interno di un pulsante

risposta

Problemi correlati