it-swarm.com.de

So stoppen Sie das Sprudeln von Ereignissen durch Klicken auf das Kontrollkästchen

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 das Kontrollkästchen angeklickt 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 standardmäßige Klickverhalten (Kontrollkästchen aktiviert/deaktiviert) nicht ausgeführt wird.

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

event.preventDefault();
return false;
168
roryf

ersetzen

event.preventDefault();
return false;

mit

event.stopPropagation();

event.stopPropagation ()

Stoppt die Weiterleitung eines Ereignisses an übergeordnete Elemente 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 (für dieses Ereignisobjekt) aufgerufen wurde.

315
rahul

Verwenden Sie die stopPropagation-Methode:

event.stopPropagation();
32
Patrice Neff

IE nicht vergessen:

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

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

Sie können einfach false in der Ereignisbehandlungsroutine zurückgeben

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 von event.stopPropagation() oder Zurückgeben von false ausgelöst wird.

5
DutchKevv

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 event.stopPropagation(); gestoppt.

$(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;
               }
          });     
  });
5
mehras

Versuchen Sie, wie bereits erwähnt, stopPropagation().

Und es gibt einen Second Handler, den man ausprobieren kann: event.cancelBubble = true; Es ist ein IE spezifischer Handler, aber er wird in mindestens FF unterstützt. Ich weiß nicht viel darüber, da ich ihn selbst nicht benutzt habe, aber er könnte einen wert sein Schuss, wenn alles andere fehlschlägt.

5
peirix

Gutschrift auf @ 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>
1
user2503764