Klicken Sie auf das Kontrollkästchen, um das Sprudeln von Ereignissen zu stoppen

Ich habe ein Kontrollkästchen, mit dem ich eine Ajax-Aktion für das Klickereignis ausführen möchte. Das Kontrollkästchen befindet sich jedoch auch in einem Container mit einem eigenen Klickverhalten, das ich nicht ausführen möchte, wenn auf das Kontrollkästchen geklickt wird. Dieses Beispiel zeigt, was ich tun möchte:

$(document).ready(function() {
  $('#container').addClass('hidden');
  $('#header').click(function() {
    if ($('#container').hasClass('hidden')) {
      $('#container').removeClass('hidden');
    } else {
      $('#container').addClass('hidden');
    }
  });
  $('#header input[type=checkbox]').click(function(event) {
    // Do something
  });
});

#container.hidden #body {
  display: none;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="container">
  <div id="header">
    <h1>Title</h1>
    <input type="checkbox" name="test" />
  </div>
  <div id="body">
    <p>Some content</p>
  </div>
</div>

Ich kann jedoch nicht herausfinden, wie das Sprudeln des Ereignisses gestoppt werden kann, ohne dass das Standardklickverhalten (Kontrollkästchen wird aktiviert / deaktiviert) nicht ausgeführt wird.

Beide der folgenden Aktionen stoppen das Sprudeln des Ereignisses, ändern jedoch auch nicht den Status des Kontrollkästchens:

event.preventDefault();
return false;

ersetzen

event.preventDefault();
return false;

mit

event.stopPropagation();

event.stopPropagation ()

Stoppt das Sprudeln eines Ereignisses zu übergeordneten Elementen und verhindert, dass übergeordnete Handler über das Ereignis benachrichtigt werden.

event.preventDefault ()

Verhindert, dass der Browser die Standardaktion ausführt. Verwenden Sie die Methode isDefaultPrevented, um festzustellen, ob diese Methode jemals aufgerufen wurde (für dieses Ereignisobjekt).

Verwenden Sie die stopPropagation-Methode:

event.stopPropagation();

IE nicht vergessen:

if (event.stopPropagation) {    // standard
        event.stopPropagation();
    } else {    // IE6-8
        event.cancelBubble = true;
}

Wie andere bereits erwähnt haben, versuchen Sie es stopPropagation().

Und es gibt einen zweiten Handler, den Sie ausprobieren sollten: event.cancelBubble = true;Es ist ein IE-spezifischer Handler, der jedoch in mindestens FF unterstützt wird. Ich weiß nicht wirklich viel darüber, da ich es selbst nicht benutzt habe, aber es könnte einen Versuch wert sein, wenn alles andere fehlschlägt.

Dies ist ein hervorragendes Beispiel für das Verständnis des Konzepts der Ereignisblasenbildung. Basierend auf den obigen Antworten sieht der endgültige Code wie unten erwähnt aus. Wenn der Benutzer auf das Kontrollkästchen klickt, wird die Ereignisweitergabe an das übergeordnete Element 'header' mit gestoppt event.stopPropagation();.

$(document).ready(function() {
            $('#container').addClass('hidden');
            $('#header').click(function() {
                if($('#container').hasClass('hidden')) {
                    $('#container').removeClass('hidden');
                } else {
                    $('#container').addClass('hidden');
                }
            });
          $('#header input[type=checkbox]').click(function(event) {
              if (event.stopPropagation) {    // standard
                   event.stopPropagation();
               } else {    // IE6-8
                    event.cancelBubble = true;
               }
          });     
  });

Wenn Sie jQuery verwenden, müssen Sie keine Stoppfunktion separat aufrufen.

Sie können einfach falsein der Ereignisbehandlungsroutine zurückkehren

Dadurch wird das Ereignis gestoppt und das Sprudeln abgebrochen.

Siehe auch event.preventDefault () vs. return false

Aus den jQuery-Dokumenten:

Diese Handler können daher verhindern, dass der delegierte Handler durch Aufrufen event.stopPropagation()oder Zurückgeben ausgelöst wird false.

Gutschrift an @mehras für den Code. Ich habe gerade ein Snippet erstellt, um es zu demonstrieren, weil ich dachte, das wäre wünschenswert und ich wollte eine Ausrede, um diese Funktion auszuprobieren.

$(document).ready(function() {
  $('#container').addClass('hidden');
  $('#header').click(function() {
    if ($('#container').hasClass('hidden')) {
      $('#container').removeClass('hidden');
    } else {
      $('#container').addClass('hidden');
    }
  });
  $('#header input[type=checkbox]').click(function(event) {
    if (event.stopPropagation) { // standard
      event.stopPropagation();
    } else { // IE6-8
      event.cancelBubble = true;
    }
  });
});

div {
  text-align: center;
  padding: 2em;
  font-size: 1.2em
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header"><input type="checkbox" />Checkbox won't bubble the event, but this text will.</div>
<div id="container">click() bubbled up!</div>

In AngularJs sollte dies funktionieren:

event.preventDefault(); 
event.stopPropagation();