Impedisci javascript onclick sull'elemento figlio

StackOverflow https://stackoverflow.com/questions/1431812

  •  07-07-2019
  •  | 
  •  

Domanda

Ok, semplice domanda: 

<div onclick="javascript:manualToggle(this)">
    <span>Allowed to click</span>
    <span>Not allowed to click</span>
    <span>Allowed to click</span>
</div>

Senza replicare il manuale Attivare i 2 span su cui è consentito fare clic, come posso impedire che " Non sia permesso fare clic su " tempo dall'attivazione dell'evento genitore onclick div quando viene cliccato su?

È stato utile?

Soluzione

È necessario un gestore di eventi (è molto semplice farlo in qualcosa come jQuery) che cattura i clic per gli span all'interno del div e attiva la funzione solo se, ad esempio, lo span ha / non ha una classe particolare.

Altri suggerimenti

Assegna a un id span un evento onclick allegato e usa

Un esempio di jQuery 

$("#spn2").click(function(event){
  event.stopPropagation();  
});

event.stopPropagation () : blocca il gorgoglio di un evento agli elementi padre, impedendo a qualsiasi gestore padre di essere informato dell'evento.

Avrebbe senso usare una libreria ma senza di te puoi provare questo (modificato con un'intera pagina per testare): 

<html><head></head>
<body>
<script type="text/javascript"><!--
function manualToggle(val)
{
    alert(val.id);
}

--></script>

<div id="test" onclick="manualToggle(this);">
    <span>Allowed to click</span>
    <span onclick="event.cancelBubble=true;if (event.stopPropagation) event.stopPropagation();">Not allowed to click</span>
    <span>Allowed to click</span>
</div>
</body>
</html>

con mootools puoi usare il metodo stopPropagation : 

$('myChild').addEvent('click', function(ev){
    ev.stopPropagation(); // this will prevent the event to bubble up, and fire the parent's click event.
});

vedi http://mootools.net/docs/core/Native/ Event # evento: stopPropagation

vedi anche questa domanda molto simile: Come posso impedire a un evento onclick di essere attivato per l'elemento genitore quando si fa clic su figlio?

Ho appena avuto lo stesso problema e non sono riuscito a far funzionare jQuery, quindi ho usato Javascript semplice: 

document.getElementById("your_span").addEventListener("click", (event) => {
    event.stopPropagation();
});

Questo ha funzionato per me. Ovviamente devi aggiungere addEventListener a ogni elemento a cui vuoi applicare questo. Dato che faccio molta manipolazione DOM, questo non è stato un problema per me. Spero che questo aiuti chiunque :)

Possibile soluzione: fornire l'ID dello span e verificare se è possibile fare clic sull'ID cliccato nella funzione

cattiva idea: non sai quale intervallo viene cliccato da quando chiami la funzione dal tuo div ...

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top