[javascript] Comment arrêter les bulles d'événement sur la case à cocher cliquez sur



Answers

Utilisez la méthode stopPropagation:

event.stopPropagation();
Question

J'ai une case à cocher que je veux effectuer une action Ajax sur l'événement click, mais la case à cocher est également dans un conteneur avec son propre comportement de clic que je ne veux pas exécuter lorsque la case est cochée. 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 n'arrive pas à comprendre comment arrêter l'événement qui bouillonne sans provoquer le comportement de clic par défaut (case à cocher qui devient cochée / décochée) pour ne pas s'exécuter.

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

event.preventDefault();
return false;



En angularjs ceci devrait fonctionner:

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



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



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 n'en sais pas grand-chose, car je ne m'en suis pas servi moi-même, mais ça vaut peut-être la peine d'essayer, si tout le reste échoue.






Links