ejemplo - Howto: div con onclick dentro de otro div con onclick javascript
onclick jquery html (11)
Básicamente hay dos modelos de eventos en javascript. Captura de eventos y burbujeo de eventos . En caso de que se produzca un burbujeo, si hace clic en div interior, se activará primero el evento de división interna y luego el clic de div exterior. durante la captura de eventos, primero se disparó el evento div externo y luego se disparó el evento div interno. Para detener la propagación de eventos, use este código en su método de clic.
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
Sólo una pregunta rápida. Estoy teniendo un problema con divs con onclick javascript entre sí. Cuando hago clic en el div interno, solo debería disparar, se hace clic en javascript, pero también se está disparando el javascript del div externo. ¿Cómo puede el usuario hacer clic en la división interna sin activar el javascript de la división externa?
<html>
<body>
<div onclick="alert(''outer'');" style="width:300px;height:300px;background-color:green;padding:5px;">outer div
<div onclick="alert(''inner'');" style="width:200px;height:200px;background-color:white;" />inner div</div>
</div>
</div>
</body>
</html>
Echa un vistazo a la información sobre la propagación del evento here
En particular, querrá un código como este en sus controladores de eventos para evitar que los eventos se propaguen:
function myClickHandler(e)
{
// Here you''ll do whatever you want to happen when they click
// now this part stops the click from propagating
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
Este es un caso de evento de burbujeo.
Puedes usar
e.cancelBubble = true; //IE
y
e.stopPropagation(); //FF
Esto fue muy útil, pero no funcionó para mí.
Lo que hice se describe here .
Entonces puse una condición al evento onclick externo:
if( !event.isPropagationStopped() ) {
window.location.href = url;
}
Esto me funcionó en Jquery:
$(''#outer_element'').click(function(event) {
if(event.target !== event.currentTarget) return;
alert("Outer element is clicked")
});
De esta manera, si el objetivo actual no es el mismo que el div exterior, no hará nada. Puede implementar funciones normales en los elementos secundarios.
Puedes usar
$("divOrClassThatYouDontWantToPropagate").click(function( event ) {
event.stopPropagation();
});
Solo agrega este código:
window.event.stopPropagation();
Una forma más para los navegadores basados en webkit:
<div onclick="alert(''inner''); event.stopPropagation;" ...
tienes dos ''div'' y tres ''/ div''.
here hay una referencia más para ayudarlo a comprender el burbujeo de eventos javascript.
return false; desde la función onclick del div interno:
<div onclick="alert(''inner''); return false;" ...
Con lo que estás tratando se llama here .