Hoe om te stoppen event bubbling op checkbox klik

Question

Hoe om te stoppen event bubbling op checkbox klik

stemmen

149

Ik heb een checkbox die ik wil wat Ajax actie op de klik evenement uit te voeren, maar de checkbox is ook in een container met een eigen klikgedrag dat wil ik niet worden uitgevoerd wanneer het selectievakje wordt geklikt. Dit voorbeeld illustreert wat ik wil doen:

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

Nochtans, kan ik niet achterhalen hoe om het evenement te stoppen bubbling zonder dat de standaard klikgedrag (checkbox steeds gecontroleerd / ongecontroleerd) niet uit te voeren.

Zowel van de volgende stop het evenement borrelen, maar ook niet de checkbox niet wijzigen:

event.preventDefault();
return false;

javascript jquery checkbox events

De vraag is gesteld op 22/07/2009 om 10:55
bron van user roryf

In andere talen...

8 antwoorden

stemmen

30

Gebruik de stopPropagation methode:

event.stopPropagation();

antwoordde op 22/07/2009 om 11:06
bron van user Patrice Neff

stemmen

5

Zoals anderen al hebben gezegd, proberen stopPropagation().

En er is een tweede afhandelingsbedrijf te proberen: event.cancelBubble = true;Het is een IE specifieke handler, maar het wordt ondersteund in ten minste FF. Weet niet echt veel over het, zoals ik het zelf niet hebt gebruikt, maar het kan een schot waard zijn, als al het andere faalt.

antwoordde op 22/07/2009 om 11:12
bron van user peirix

stemmen

25

Vergeet niet IE:

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

antwoordde op 16/12/2012 om 10:50
bron van user Faraz Kelhini

stemmen

4

Dit is een uitstekend voorbeeld voor het begrijpen van event bubbling concept. Op basis van het bovenstaande antwoorden, zal de uiteindelijke code eruit zoals hieronder vermeld. Wanneer de gebruiker klikt op het selectievakje van de gebeurtenis vermeerdering 'header' haar moedermaatschappij element wordt gestopt met behulp van 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;
               }
          });     
  });

antwoordde op 27/07/2015 om 10:13
bron van user mehras

stemmen

5

Bij het gebruik van jQuery je hoeft niet te bellen een stop-functie te scheiden ..

Je kunt gewoon return falsein de event handler

Dit zal stoppen met de gebeurtenis en borrelende annuleren ..

Zie ook:

event.preventDefault () vs. return false

Vanaf het jQuery docs:

Deze handlers kan daarom voorkomen dat de gedelegeerde handler van triggering door te bellen naar event.stopPropagation () of terug te keren vals.

antwoordde op 17/08/2015 om 10:36
bron van user DutchKevv

stemmen

0

Met dank aan @mehras voor de code. Ik heb zojuist een fragment om het te laten zien omdat ik dacht dat zou gewaardeerd worden en ik wilde een excuus om te proberen die functie.

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

antwoordde op 19/04/2017 om 20:39
bron van user user2503764

stemmen

-1

In angularjs zou dit werken:

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

antwoordde op 22/05/2017 om 09:08
bron van user Kugan Kumar

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

vervangen

event.preventDefault();
return false;

met

event.stopPropagation();

event.stopPropagation ()

Stopt het borrelen van een evenement bovenliggende elementen, voorkomen dat ouder handlers van de kennisgeving van de gebeurtenis.

event.preventDefault ()

Voorkomt dat de browser van de uitvoering van de standaard actie. Gebruik de methode isDefaultPrevented om te weten of deze methode ooit werd genoemd (op die gebeurtenis object).