Prevenir javascript onclick en elemento hijo

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

  •  07-07-2019
  •  | 
  •  

Pregunta

Ok, pregunta simple: 

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

Sin replicar el manual Cambie a los 2 tramos a los que se les permite hacer clic, ¿cómo puedo evitar que "No se permita hacer clic"? ¿abarcar desde que se dispara su evento de clic de división principal cuando se hace clic en él?

¿Fue útil?

Solución

Necesita un controlador de eventos (es muy fácil hacer esto en algo como jQuery) que captura los clics para los tramos dentro del div y solo activa la función si, por ejemplo, el lapso tiene / no tiene una clase en particular.

Otros consejos

Dele al span un id un evento adjunto onclick y use

Una muestra de jQuery 

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

event.stopPropagation () : detiene el burbujeo de un evento para elementos primarios, evitando que cualquier controlador primario sea notificado del evento.

Tendría sentido usar una biblioteca pero sin ti puedes probar esto (editado con una página completa para probar): 

<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 puede usar el método stopPropagation : 

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

ver http://mootools.net/docs/core/Native/ Evento n. ° Evento: stopPropagation

también vea esta pregunta muy similar: ¿Cómo puedo evitar que un evento onclick se active para el elemento primario cuando se hace clic en child?

Simplemente tuve el mismo problema y no pude hacer que jQuery funcionara, así que usé Javascript simple: 

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

Eso hizo el truco para mí. Obviamente, debe agregar el addEventListener a cada elemento al que desee aplicar esto. Como hago mucha manipulación DOM, esto no fue un problema para mí. Espero que esto ayude a cualquiera :)

Posible solución: proporcione los id del span y verifique si se puede hacer clic en el id en su función

mala idea: no sabes en qué lapso se hace clic desde que llamas a la función desde tu div ...

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top