web-dev-qa-db-fra.com

Comment arrêter l'événement bouillonnant en cliquant sur la case à cocher

J'ai une case à cocher sur laquelle je souhaite effectuer une action Ajax sur l'événement click. Toutefois, la case à cocher se trouve également dans un conteneur avec son propre comportement de clic que je ne souhaite pas exécuter lorsque la case est cochée. Cet exemple illustre ce que je veux faire:

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

Cependant, je ne peux pas comprendre comment arrêter l'événement qui bouillonne sans que le comportement du clic par défaut (les cases à cocher devenant cochées/décochées) ne s'exécute pas.

Les deux opérations suivantes arrêtent la diffusion de l'événement mais ne modifient pas non plus l'état de la case à cocher:

event.preventDefault();
return false;
javascriptjquerycheckboxevents
168
roryf

remplacer

event.preventDefault();
return false;

avec

event.stopPropagation();

event.stopPropagation ()

Arrête la propagation d'un événement sur les éléments parents, empêchant ainsi les gestionnaires parents d'être avertis de l'événement.

event.preventDefault ()

Empêche le navigateur d'exécuter l'action par défaut. Utilisez la méthode isDefaultPrevented pour savoir si cette méthode a déjà été appelée (sur cet événement).

315
rahul

Utilisez la méthode stopPropagation:

event.stopPropagation();
32
Patrice Neff

N'oubliez pas IE:

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

Lorsque vous utilisez jQuery, vous n'avez pas besoin d'appeler une fonction d'arrêt distincte.

Vous pouvez simplement retourner false dans le gestionnaire d'événements

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

Voir aussi event.preventDefault () vs. return false

À partir de la documentation jQuery:

Par conséquent, ces gestionnaires peuvent empêcher le gestionnaire délégué de se déclencher en appelant event.stopPropagation() ou en renvoyant false.

5
DutchKevv

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 à celui mentionné ci-dessous. Lorsque l'utilisateur coche la case, la propagation de l'événement à son en-tête 'élément d'en-tête' sera stoppée par 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;
               }
          });     
  });
5
mehras

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

Et il y a un deuxième gestionnaire à essayer: event.cancelBubble = true; C'est un gestionnaire spécifique à IE, mais il est pris en charge au moins dans FF. Je n'en sais vraiment rien, car je ne l'ai pas utilisé moi-même, mais cela pourrait valoir le coup, si tout le reste échoue.

5
peirix

Nous remercions @ mehras pour le code. Je viens de créer un extrait pour le démontrer car 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>
1
user2503764