¿Cómo detener la propagación de eventos con el atributo onclick en línea?
Considera lo siguiente:
<div onclick="alert('you clicked the header')" class="header">
<span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>
¿Cómo puedo hacer para que cuando el usuario haga clic en el intervalo, no se active el divevento de clic?
Utilice event.stopPropagation() .
<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>
Para es decir:window.event.cancelBubble = true
<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>
Hay dos formas de obtener el objeto de evento desde dentro de una función:
- El primer argumento, en un navegador compatible con W3C (Chrome, Firefox, Safari, IE9+)
- El objeto window.event en Internet Explorer (<=8)
Si necesita admitir navegadores heredados que no siguen las recomendaciones del W3C, generalmente dentro de una función usaría algo como lo siguiente:
function(e) {
var event = e || window.event;
[...];
}
que verificaría primero uno, luego el otro y almacenaría lo que se encontrara dentro de la variable de evento. Sin embargo, en un controlador de eventos en línea no hay ningún eobjeto para usar. En ese caso debes aprovechar la argumentscolección que siempre está disponible y se refiere al conjunto completo de argumentos pasados a una función:
onclick="var event = arguments[0] || window.event; [...]"
Sin embargo, en términos generales, debería evitar los controladores de eventos en línea si necesita algo complicado como detener la propagación. Escribir los controladores de eventos por separado y adjuntarlos a los elementos es una idea mucho mejor a mediano y largo plazo, tanto por motivos de legibilidad como de mantenimiento.
Tenga en cuenta que window.event no es compatible con Firefox y, por lo tanto, debe ser algo como:
e.cancelBubble = true
O puede utilizar el estándar W3C para Firefox:
e.stopPropagation();
Si quieres ponerte elegante, puedes hacer esto:
function myEventHandler(e)
{
if (!e)
e = window.event;
//IE9 & Other Browsers
if (e.stopPropagation) {
e.stopPropagation();
}
//IE8 and Lower
else {
e.cancelBubble = true;
}
}
