¿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 que cuando el usuario haga clic en el intervalo, no divactive el evento de clic del?

Utilice event.stopPropagation () .

<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>

Para IE: 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 una función:

1. El primer argumento, en un navegador compatible con W3C (Chrome, Firefox, Safari, IE9 +)
2. 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, y luego el otro y almacenaría el que se encontrara dentro de la variable de evento. Sin embargo, en un controlador de eventos en línea no hay un eobjeto para usar. En ese caso, debe 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, debe evitar los controladores de eventos en línea si necesita algo complicado como detener la propagación. Escribir sus manejadores de eventos por separado y adjuntarlos a elementos es una idea mucho mejor a mediano y largo plazo, tanto para facilitar la lectura como para el mantenimiento.

Tenga en cuenta que window.event no es compatible con FireFox y, por lo tanto, debe ser algo similar a:

e.cancelBubble = true

O bien, puede usar 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;
    }
}

Use esta función, probará la existencia del método correcto.

function disabledEventPropagation(event)
{
   if (event.stopPropagation){
       event.stopPropagation();
   }
   else if(window.event){
      window.event.cancelBubble=true;
   }
}

Tuve el mismo problema - cuadro de error js en IE - esto funciona bien en todos los navegadores hasta donde puedo ver (event.cancelBubble = true hace el trabajo en IE)

onClick="if(event.stopPropagation){event.stopPropagation();}event.cancelBubble=true;"

Esto funciono para mi

<script>
function cancelBubble(e) {
 var evt = e ? e:window.event;
 if (evt.stopPropagation)    evt.stopPropagation();
 if (evt.cancelBubble!=null) evt.cancelBubble = true;
}
</script>

<div onclick="alert('Click!')">
  <div onclick="cancelBubble(event)">Something inside the other div</div>
</div>

Para las páginas web ASP.NET (no MVC), puede usar el Sys.UI.DomEventobjeto como contenedor del evento nativo.

<div onclick="event.stopPropagation();" ...

o, pase el evento como parámetro a la función interna:

<div onclick="someFunction(event);" ...

y en alguna función:

function someFunction(event){
    event.stopPropagation(); // here Sys.UI.DomEvent.stopPropagation() method is used
    // other onclick logic
}

Según esta página , en IE necesitas:

event.cancelBubble = true

No puedo comentar debido al Karma, así que escribo esto como una respuesta completa: De acuerdo con la respuesta de Gareth (var e = argumentos [0] || window.event; [...]) Usé este delineador en línea en el onclick para un pirateo rápido:

<div onclick="(arguments[0] || window.event).stopPropagation();">..</div>

Sé que es tarde, pero quería hacerle saber que esto funciona en una sola línea. Las llaves devuelven un evento que tiene la función stopPropagation adjunta en ambos casos, por lo que intenté encapsularlas en llaves como en un if y ... funciona. :)

Esto también funciona: en el enlace HTML, use onclick con return como este:

<a href="mypage.html" onclick="return confirmClick();">Delete</a>

Y luego la función comfirmClick () debería ser como:

function confirmClick() {
    if(confirm("Do you really want to delete this task?")) {
        return true;
    } else {
        return false;
    }
};

¿Por qué no simplemente verificar en qué elemento se hizo clic? Si hace clic en algo, window.event.targetse asigna al elemento en el que se hizo clic, y el elemento en el que se hizo clic también se puede pasar como argumento.

Si el objetivo y el elemento no son iguales, fue un evento que se propagó hacia arriba.

function myfunc(el){
  if (window.event.target === el){
      // perform action
  }
}
<div onclick="myfunc(this)" />

<div onclick="alert('you clicked the header')" class="header">
  <span onclick="alert('you clicked inside the header'); event.stopPropagation()">
    something inside the header
  </span>
</div>

La mejor solución sería manejar el evento a través de una función de JavaScript, pero para usar una solución simple y rápida usando el elemento html directamente, y una vez que el "evento" y "window.event" están en desuso y no son compatibles universalmente ( https://developer.mozilla.org/en-US/docs/Web/API/Window/event ), sugiero el siguiente "código duro":

<div onclick="alert('blablabla'); (arguments[0] ? arguments[0].stopPropagation() : false);">...</div>