Comment arrêter événement bouillonnant sur la case clic

Question

Comment arrêter événement bouillonnant sur la case clic

voix

149

J'ai une case à cocher que je veux effectuer une action Ajax sur l'événement click, mais la case est aussi à l'intérieur d'un conteneur avec son propre comportement de clic que je ne veux pas courir lorsque la case est cliqué. Cet exemple illustre ce que je veux faire:

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

Cependant, je ne peux pas comprendre comment arrêter l'événement bouillonnant sans provoquer le comportement de clic par défaut (case devenant cochée / décochée) de ne pas courir.

Les deux suivants l'événement se bouillonnante mais aussi ne change pas l'état de case à cocher:

event.preventDefault();
return false;

javascript jquery checkbox events

Créé 22/07/2009 à 10:55
source utilisateur roryf

Dans d'autres langues...

8 réponses

voix

30

Utilisez la méthode stopPropagation:

event.stopPropagation();

Créé 22/07/2009 à 11:06
source utilisateur Patrice Neff

voix

5

Comme d' autres l' ont mentionné, essayer stopPropagation().

Et il y a un deuxième gestionnaire d'essayer: event.cancelBubble = true;Il est un gestionnaire spécifique IE, mais il est pris en charge dans au moins FF. Je ne sais pas vraiment beaucoup à ce sujet, comme je ne l' ai pas utilisé moi - même, mais il pourrait être vaut le coup, si tout le reste échoue.

Créé 22/07/2009 à 11:12
source utilisateur peirix

voix

25

Ne pas oublier IE:

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

Créé 16/12/2012 à 10:50
source utilisateur Faraz Kelhini

voix

4

Ceci est un excellent exemple pour l' événement compréhension concept de bulles. Sur la base des réponses ci - dessus, le code final ressemblera comme mentionné ci - dessous. Lorsque l'utilisateur clique sur la case propagation d'événement à « tête » de son élément parent sera arrêté d' utiliser 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;
               }
          });     
  });

Créé 27/07/2015 à 10:13
source utilisateur mehras

voix

5

Lorsque vous utilisez jQuery vous n'avez pas besoin d'appeler une fonction d'arrêt séparé ..

Vous pouvez juste return falsedans le gestionnaire d'événements

Cela arrêtera l'événement et annuler bouillonnement ..

Regarde aussi:

event.preventDefault () vs. return false

De la documentation jQuery:

Ces gestionnaires peuvent donc empêcher le gestionnaire délégué du déclenchement en appelant event.stopPropagation () ou faux retour.

Créé 17/08/2015 à 10:36
source utilisateur DutchKevv

voix

0

Crédit @mehras pour le code. Je viens de créer un extrait pour le démontrer parce que je pensais que ce serait apprécié et je voulais une excuse pour essayer cette fonctionnalité.

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

Créé 19/04/2017 à 20:39
source utilisateur user2503764

voix

-1

Dans ce AngularJS devrait fonctionner:

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

Créé 22/05/2017 à 09:08
source utilisateur Kugan Kumar

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

remplacer

event.preventDefault();
return false;

avec

event.stopPropagation();

event.stopPropagation ()

Arrête le bouillonnement d'un événement à des éléments parents, ce qui empêche tous les gestionnaires parent d'être informé de l'événement.

event.preventDefault ()

Prévient le navigateur d'exécuter l'action par défaut. Utilisez la méthode isDefaultPrevented pour savoir si cette méthode n'a jamais été appelé (sur cet objet événement).