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

J'ai une case à cocher que je veux effectuer une action Ajax sur l'événement de clic, mais 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é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="https://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 bouillonnant sans que le comportement de clic par défaut (la case à cocher soit cochée / décochée) ne s'exécute pas.

Les deux éléments suivants arrêtent la propagation de l'événement, mais ne modifient pas non plus l'état de la case à cocher:

event.preventDefault();
return false;

remplacer

event.preventDefault();
return false;

avec

event.stopPropagation();

event.stopPropagation ()

Arrête la propagation d'un événement vers les éléments parents, empêchant les gestionnaires parents d'être notifiés 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 objet événement).

Utilisez la méthode stopPropagation:

event.stopPropagation();

N'oubliez pas IE:

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

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

Vous pouvez simplement revenir falsedans le gestionnaire d'événements

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

Voir également event.preventDefault () vs return false

À partir de la documentation jQuery:

Ces gestionnaires peuvent par conséquent empêcher le gestionnaire délégué de se déclencher en appelant event.stopPropagation()ou en retournant false.

Comme d'autres l'ont mentionné, essayez 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 dans au moins FF. Je ne sais pas vraiment grand-chose, car je ne l'ai pas utilisé moi-même, mais cela vaut peut-être la peine d'être essayé, si tout le reste échoue.

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

Merci à @mehras pour le code. Je viens de créer un extrait de code 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>

Voici une astuce qui a fonctionné pour moi:

handleClick = e => {
    if (e.target === e.currentTarget) {
        // do something
    } else {
        // do something else
    }
}

Explication: j'ai joint handleClick à un arrière-plan d'une fenêtre modale, mais il s'est également déclenché à chaque clic à l'intérieur d'une fenêtre modale (car il était DANS le div de fond). J'ai donc ajouté la condition (e.target === e.currentTarget), qui n'est remplie que lorsqu'un clic est effectué sur un fond.

Dans angularjs, cela devrait fonctionner:

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