Comment arrêter le Bubble d'événement sur la case à cocher cliquez

j'ai une case à cocher que je veux effectuer une action Ajax sur l'événement de clic, cependant la case à cocher est également à l'intérieur d'un conteneur avec son propre comportement de clic que je ne veux pas exécuter lorsque la case à cocher est cliqué. Cet échantillon 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 à cocher étant cochée/non cochée) pour ne pas courir.

tous les deux l'arrêt suivant de l'événement bouillonnant, mais aussi ne pas changer l'état de case à cocher:

event.preventDefault();
return false;
155
demandé sur roryf 2009-07-22 13:55:38

8 réponses

remplacer

event.preventDefault();
return false;

avec

event.stopPropagation();

événement.arrêt de la production()

arrête le bouillonnement d'un événement à éléments de parent, empêchant tout parent les gestionnaires de notification de la événement.

événement.préventdefault()

empêche le navigateur d'exécuter l'action par défaut. L'utilisation de la méthode estdéfaultprévu de savoir si cette méthode a jamais été appelé (sur ce objet de l'événement).

285
répondu rahul 2009-07-22 10:06:51

utiliser la méthode d'arrêt:

event.stopPropagation();
30
répondu Patrice Neff 2009-07-22 10:06:20

N'oubliez pas IE:

if (event.stopPropagation) {    // standard
        event.stopPropagation();
    } else {    // IE6-8
        event.cancelBubble = true;
}
26
répondu Faraz Kelhini 2015-06-23 16:03:55

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

et il y a un second handler à essayer: event.cancelBubble = true; c'est un handler spécifique à L'IE, mais il est supporté en au moins FF. Je ne sais pas grand-chose à ce sujet, car je ne l'ai pas utilisé moi-même, mais ça pourrait valoir le coup, si tout le reste échoue.

5
répondu peirix 2009-07-22 10:12:44

lorsque vous utilisez jQuery, vous n'avez pas besoin d'appeler une fonction stop séparée..

Vous pouvez tout simplement return false dans le gestionnaire d'événement

cela arrêtera l'événement et annulera les bulles..

Voir aussi:

de l'événement.preventDefault () vs. return false

De jQuery docs:

ces manipulateurs peuvent donc empêcher le gestionnaire délégué du déclenchement par appel d'événement.stopPropagation () ou returning false.

5
répondu DutchKevv 2017-05-23 11:47:26

c'est un excellent exemple pour comprendre le concept de bouillonnement d'événement. Basé sur les réponses ci-dessus, le code final ressemblera comme mentionné ci-dessous. Lorsque L'utilisateur clique sur la case à cocher, la propagation de l'événement à son élément parent "en-tête" sera arrêtée en utilisant 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;
               }
          });     
  });
4
répondu mehras 2015-07-27 10:13:08

crédit à @mehras pour le code. Je viens de créer un extrait pour le démontrer parce que je pensais que cela 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>
0
répondu user2503764 2017-05-23 12:34:48

à angularjs cela devrait fonctionner:

event.preventDefault(); 
event.stopPropagation();
-1
répondu Kugan Kumar 2017-05-22 09:08:43