Comment arrêter de remontée d'événements sur la case à cocher, cliquez

J'ai une case à cocher que je veux effectuer certaines Ajax d'action sur l'événement click, cependant la case à cocher est également à l'intérieur d'un conteneur avec sa propre sur le comportement que je ne veux pas exécuter lorsque la case est cliqué. Cet exemple illustre ce que je veux faire:

JS:

$(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
  });
});

CSS:

#container.hidden #body {
  display: none;
}

HTML:

<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 la remontée d'événements sans causer le comportement par défaut, cliquez sur (case à cocher devenir cochée/non cochée) pour ne pas s'exécuter.

À la fois de l'arrêt suivant à la remontée d'événements, mais aussi de ne pas modifier la case à cocher état:

event.preventDefault();
return false;

J'ai trouvé un article sur ce sujet qui pourrait être utile à d'autres Pile Overflowers. Astuce: Cliquez sur la Rangée de Table pour Déclencher une Case à cocher et Cliquez sur

InformationsquelleAutor roryf | 2009-07-22

309

remplacer
```
event.preventDefault();
return false;
```
avec
```
event.stopPropagation();
```
événement.stopPropagation()

Arrête le bouillonnement d'un événement à
les éléments de parent, de la prévention de tout parent
les gestionnaires de notification de la
de l'événement.

événement.preventDefault()

Empêche le navigateur de l'exécution de
l'action par défaut. L'utilisation de la méthode
isDefaultPrevented de savoir si
cette méthode a jamais été appelé (sur ce
objet de l'événement).
- pour une raison quelconque, cela ne fonctionne pas pour moi, mais return false fait.
- Si vous êtes à la liaison de l'événement à l'aide de .live() méthode, puis cela ne fonctionnera pas. Vous devrez utiliser return false; lui-même.
- Ceci fonctionne à l'aide de jQuery .on() méthode (live est maintenant obsolète). Je ne pouvais pas comprendre pourquoi return false ne fonctionnait pas.
- j'ai passé un certain temps à comprendre cet événement.preventDefault() ne montrait pas de la coche dans IE8, mais bien fonctionné dans d'autres navigateurs. J'ai trouvé cette réponse, après je le fixe, puis une recherche sur google avec preventDefault,IE8, case mot-clé, m'a amené ici.
- ne marche pas pour.. mais ce deux de la ligne a(sans return false) --> événement.preventDefault(); event.stopPropagation();
InformationsquelleAutor rahul
32

Utiliser la méthode stopPropagation:
```
event.stopPropagation();
```
InformationsquelleAutor Patrice Neff
27

N'oubliez pas c'est à dire:
```
if (event.stopPropagation) {    //standard
        event.stopPropagation();
    } else {    //IE6-8
        event.cancelBubble = true;
}
```
- Cette réponse est à partir de 2012. En 2015 s'il vous plaît ne oubliez pas IE.
- Cela s'applique à IE9 ainsi. Mon IE9 machine de test des bobines sur stopPropagation(), mais qui aime cancelBubble(). Et certaines personnes/orgs sont toujours à l'aide d'IE9 en 2016, malheureusement. Ceux d'entre nous avec les clients d'entreprise ne pouvez pas ignorer que.
InformationsquelleAutor Faraz Kelhini
5

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

Et il y a un deuxième gestionnaire d'essayer: event.cancelBubble = true; C'est un IE gestionnaire spécifique, mais il est pris en charge dans au moins FF. Ne connais pas vraiment sur le sujet, car je n'ai pas utilisé moi-même, mais il pourrait être intéressant d'un coup, si tout le reste échoue.

InformationsquelleAutor peirix

C'est un excellent exemple pour comprendre remontée d'événements concept. Basé sur les réponses ci-dessus, le code final ressemblera comme mentionné ci-dessous. Lorsque l'utilisateur Clique sur la case de la propagation de l'évènement de son élément parent 'header' sera arrêté à l'aide de 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;
               }
          });     
  });

InformationsquelleAutor mehras

5

Lors de l'utilisation de jQuery, vous n'avez pas besoin d'appeler une fonction d'arrêt séparé.

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

Cela permettra d'arrêter l'épreuve en cours et annuler le bouillonnement..

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

De l'jQuery docs:

Ces gestionnaires, par conséquent, peuvent empêcher le délégué du gestionnaire de déclenchement en appelant event.stopPropagation() ou le retour de false.

InformationsquelleAutor DutchKevv

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

JS:

$(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;
    }
  });
});

CSS:

div {
  text-align: center;
  padding: 2em;
  font-size: 1.2em
}

.hidden {
  display: none;
}

HTML:

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

Code qui montre réellement comment utiliser l'événement de variable, merci.

InformationsquelleAutor user2503764

-1

Dans angularjs cela devrait fonctionner:
```
event.preventDefault(); 
event.stopPropagation();
```
InformationsquelleAutor Kugan Kumar

Vous devez vous connecter pour publier un commentaire.