Come fermare la propagazione degli eventi con l'attributo onclick inline?

Considera quanto segue:

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

Come posso fare in modo che quando l'utente fa clic sull'intervallo, non genera l' divevento click?

Usa event.stopPropagation () .

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

Per IE: window.event.cancelBubble = true

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

Esistono due modi per ottenere l'oggetto evento dall'interno di una funzione:

1. Il primo argomento, in un browser conforme a W3C (Chrome, Firefox, Safari, IE9 +)
2. L'oggetto window.event in Internet Explorer (<= 8)

Se devi supportare i browser legacy che non seguono i consigli del W3C, generalmente all'interno di una funzione utilizzeresti qualcosa del tipo seguente:

function(e) {
  var event = e || window.event;
  [...];
}

che controlla prima l'uno e poi l'altro e memorizza quello che è stato trovato nella variabile evento. Tuttavia, in un gestore di eventi inline non esiste un eoggetto da utilizzare. In tal caso, è necessario sfruttare la argumentsraccolta che è sempre disponibile e fa riferimento all'insieme completo di argomenti passati a una funzione:

onclick="var event = arguments[0] || window.event; [...]"

Tuttavia, in generale dovresti evitare i gestori di eventi in linea se devi fare qualcosa di complicato come interrompere la propagazione. Scrivere i gestori di eventi separatamente e collegarli agli elementi è un'idea molto migliore a medio e lungo termine, sia per la leggibilità che per la manutenibilità.

Tieni presente che window.event non è supportato in FireFox e quindi deve essere qualcosa sulla falsariga di:

e.cancelBubble = true

In alternativa, è possibile utilizzare lo standard W3C per FireFox:

e.stopPropagation();

Se vuoi divertirti, puoi farlo:

function myEventHandler(e)
{
    if (!e)
      e = window.event;

    //IE9 & Other Browsers
    if (e.stopPropagation) {
      e.stopPropagation();
    }
    //IE8 and Lower
    else {
      e.cancelBubble = true;
    }
}

Utilizzare questa funzione, verificherà l'esistenza del metodo corretto.

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

Ho avuto lo stesso problema - js error box in IE - questo funziona bene in tutti i browser per quanto posso vedere (event.cancelBubble = true fa il lavoro in IE)

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

Questo ha funzionato per me

<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>

Per le pagine Web ASP.NET (non MVC), è possibile utilizzare l' Sys.UI.DomEventoggetto come wrapper di eventi nativi.

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

oppure, passa l'evento come parametro alla funzione interna:

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

e in qualche funzione:

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

Secondo questa pagina , in IE è necessario:

event.cancelBubble = true

Non posso commentare a causa del Karma, quindi scrivo questa come una risposta completa: secondo la risposta di Gareth (var e = argomenti [0] || window.event; [...]) ho usato questo oneliner in linea sul clic per un hack rapido:

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

So che è tardi ma volevo farti sapere che funziona in una riga. Le parentesi graffe restituiscono un evento a cui è associata la funzione stopPropagation in entrambi i casi, quindi ho cercato di incapsularle in parentesi graffe come in un if e .... funziona. :)

Questo funziona anche - Nel link HTML usa onclick con return in questo modo:

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

E quindi la funzione comfirmClick () dovrebbe essere come:

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

Perché non controllare semplicemente quale elemento è stato cliccato? Se fai clic su qualcosa, window.event.targetviene assegnato all'elemento su cui è stato fatto clic e l'elemento cliccato può anche essere passato come argomento.

Se il target e l'elemento non sono uguali, si è propagato un evento.

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 soluzione migliore sarebbe gestire l'evento tramite una funzione javascript, ma per utilizzare una soluzione semplice e rapida usando direttamente l'elemento html e una volta che "event" e "window.event" sono obsoleti e non universalmente supportati ( https://developer.mozilla.org/en-US/docs/Web/API/Window/event ), suggerisco il seguente "codice reale":

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