Wie stoppe ich die Ereignisausbreitung mit dem Inline-Onclick-Attribut?

Folgendes berücksichtigen:

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

Wie kann ich festlegen, dass das Klickereignis des Benutzers nicht ausgelöst wird, wenn der Benutzer auf die Spanne divklickt?

Verwenden Sie event.stopPropagation () .

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

Für IE: window.event.cancelBubble = true

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

Es gibt zwei Möglichkeiten, das Ereignisobjekt aus einer Funktion heraus abzurufen:

1. Das erste Argument in einem W3C-kompatiblen Browser (Chrome, Firefox, Safari, IE9 +)
2. Das window.event-Objekt in Internet Explorer (<= 8)

Wenn Sie ältere Browser unterstützen müssen, die nicht den W3C-Empfehlungen entsprechen, würden Sie im Allgemeinen innerhalb einer Funktion Folgendes verwenden:

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

Das würde zuerst das eine und dann das andere prüfen und speichern, was auch immer in der Ereignisvariablen gefunden wurde. In einem Inline-Event-Handler gibt es jedoch keinene Objekt zu verwenden. In diesem Fall müssen Sie die argumentsSammlung nutzen, die immer verfügbar ist und sich auf den vollständigen Satz von Argumenten bezieht, die an eine Funktion übergeben wurden:

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

Im Allgemeinen sollten Sie jedoch Inline-Ereignishandler vermeiden, wenn Sie etwas Kompliziertes wie das Stoppen der Weitergabe benötigen. Es ist mittel- und langfristig eine viel bessere Idee, Ihre Event-Handler separat zu schreiben und sie an Elemente anzuhängen, sowohl aus Gründen der Lesbarkeit als auch der Wartbarkeit.

Beachten Sie, dass window.event in FireFox nicht unterstützt wird. Daher muss es sich um Folgendes handeln:

e.cancelBubble = true

Oder Sie können den W3C-Standard für FireFox verwenden:

e.stopPropagation();

Wenn Sie Lust haben, können Sie dies tun:

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

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

Verwenden Sie diese Funktion, um festzustellen, ob die richtige Methode vorhanden ist.

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

Ich hatte das gleiche Problem - js Fehlerbox im IE - dies funktioniert in allen Browsern, soweit ich sehen kann (event.cancelBubble = true erledigt den Job im IE)

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

Das hat bei mir funktioniert

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

Für ASP.NET-Webseiten (nicht MVC) können Sie das Sys.UI.DomEventObjekt als Wrapper für native Ereignisse verwenden.

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

oder übergeben Sie das Ereignis als Parameter an die innere Funktion:

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

und in irgendeiner Funktion:

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

Laut dieser Seite benötigen Sie im IE:

event.cancelBubble = true

Ich kann wegen Karma keinen Kommentar abgeben, also schreibe ich dies als ganze Antwort: Gemäß der Antwort von Gareth (var e = Argumente [0] || window.event; [...]) habe ich diesen Oneliner inline auf dem Onclick für a verwendet schneller Hack:

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

Ich weiß, dass es spät ist, aber ich wollte Sie wissen lassen, dass dies in einer Zeile funktioniert. Die geschweiften Klammern geben ein Ereignis zurück, an das in beiden Fällen die stopPropagation-Funktion angehängt ist. Deshalb habe ich versucht, sie in geschweiften Klammern zu kapseln, wie in einem if und .... es funktioniert. :) :)

Dies funktioniert auch - Verwenden Sie im Link-HTML onclick mit der folgenden Rückgabe:

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

Und dann sollte die Funktion comfirmClick () wie folgt aussehen:

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

Warum nicht einfach überprüfen, auf welches Element geklickt wurde? Wenn Sie auf etwas klicken, window.event.targetwird dem Element, auf das geklickt wurde, und zugewiesen das angeklickte Element kann auch als Argument übergeben werden.

Wenn das Ziel und das Element nicht gleich sind, hat sich dieses Ereignis verbreitet.

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>

Die beste Lösung wäre, mit dem Ereignis über eine Javascript-Funktion umzugehen, aber um eine einfache und schnelle Lösung mit dem HTML-Element direkt zu verwenden, und sobald "event" und "window.event" veraltet sind und nicht allgemein unterstützt werden ( https://developer.mozilla.org/en-US/docs/Web/API/Window/event ) schlage ich den folgenden "harten Code" vor:

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