Ereignis-Bubbling auf Kontrollkästchen Klick stoppen

Question

Ereignis-Bubbling auf Kontrollkästchen Klick stoppen

stimmen

149

Ich habe ein Kontrollkästchen, das ich einige Ajax Aktion auf dem Click-Ereignisse ausgeführt werden soll, aber das Kontrollkästchen ist auch in einem Container mit einem eigenen Klickverhalten, das will ich nicht laufen, wenn die Checkbox angeklickt wird. Dieses Beispiel zeigt, was ich tun möchte:

<html lang=en>
    <head>
        <title>Test</title>
        <script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js></script>
        <script type=text/javascript>
        $(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
            });
        });
        </script>
        <style type=text/css>
        #container.hidden #body {
            display:none;
        }
        </style>
    </head>
    <body>
        <div id=container>
            <div id=header>
                <h1>Title</h1>
                <input type=checkbox name=test />
            </div>
            <div id=body>
                <p>Some content</p>
            </div>
        </div>
    </body>
</html>

Allerdings kann ich nicht herausfinden, wie das Ereignis zu stoppen, ohne sprudelt das Standardklickverhalten verursacht (Kontrollkästchen immer aktiviert / deaktiviert) nicht ausgeführt werden.

Die beiden folgenden stoppen das Ereignis sprudeln aber auch nicht das Kontrollkästchen Zustand ändern:

event.preventDefault();
return false;

javascript jquery checkbox events

Veröffentlicht am 22/07/2009 um 10:55
quelle vom benutzer roryf

In anderen Sprachen...

8 antworten

stimmen

30

Verwenden Sie die stopPropagation Methode:

event.stopPropagation();

Beantwortet am 22/07/2009 um 11:06
quelle vom benutzer Patrice Neff

stimmen

5

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

Und es gibt einen zweiten Handler , um zu versuchen: event.cancelBubble = true;Es ist ein IE spezifischen Handler, aber es wird in mindestens FF unterstützt. Sie wissen es nicht wirklich viel, wie ich es selbst nicht benutzt haben, aber es könnte ein Schuss, wenn alles andere fehlschlägt wert sein.

Beantwortet am 22/07/2009 um 11:12
quelle vom benutzer peirix

stimmen

25

Vergessen Sie nicht, IE:

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

Beantwortet am 16/12/2012 um 10:50
quelle vom benutzer Faraz Kelhini

stimmen

4

Dies ist ein hervorragendes Beispiel für das Verständnis Ereignis sprudelndes Konzepts. Basierend auf den oben genannten Antworten wird der endgültige Code aussehen wie unten erwähnt. Wo der Benutzer die Ereignispropagierung zu seinem übergeordneten Element ‚Header‘ Klicks auf Checkbox wird mit gestoppt werden 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;
               }
          });     
  });

Beantwortet am 27/07/2015 um 10:13
quelle vom benutzer mehras

stimmen

5

Wenn jQuery verwenden brauchen Sie nicht eine Stopp-Funktion trennen zu nennen ..

Sie können nur return falsein den Event - Handler

Dadurch wird das Ereignis stoppen und sprudelnde abbrechen ..

Siehe auch:

Event.preventDefault () return false vs.

Aus der jQuery docs:

Diese Handler, daher kann die delegierte Handler verhindert das Auslösen von event.stopPropagation () aufrufen oder false zurückgibt.

Beantwortet am 17/08/2015 um 10:36
quelle vom benutzer DutchKevv

stimmen

0

Kredit @mehras für den Code. Ich habe gerade einen Schnipsel es zu zeigen , weil ich dachte , dass würde geschätzt und ich wollte eine Entschuldigung diese Funktion zu versuchen.

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

Beantwortet am 19/04/2017 um 20:39
quelle vom benutzer user2503764

stimmen

-1

In AngularJS sollten diese Werke:

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

Beantwortet am 22/05/2017 um 09:08
quelle vom benutzer Kugan Kumar

rahul · Accepted Answer · 2009-07-22 11:06

ersetzen

event.preventDefault();
return false;

mit

event.stopPropagation();

event.stopPropagation ()

Stoppen das Sprudeln eines Ereignis übergeordnete Elemente, die Verhinderung jeglicher Mutter Handler von dem Ereignisse benachrichtigt zu werden.

Event.preventDefault ()

Verhindert, dass der Browser die Ausführung der Standardaktion. Verwenden Sie die Methode isDefaultPrevented zu wissen, ob diese Methode überhaupt (an diesem Ereignis Objekt) aufgerufen wurde.