[Javascript] Come interrompere l'evento ribollendo nella casella di controllo


Answers

Usa il metodo stopPropagation:

event.stopPropagation();
Question

Ho una casella di controllo che voglio eseguire un'azione Ajax sull'evento click, tuttavia la casella di controllo si trova anche all'interno di un contenitore con il proprio comportamento di clic che non desidero eseguire quando si fa clic sulla casella di controllo. Questo esempio illustra cosa voglio fare:

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

Tuttavia, non riesco a capire come interrompere il bubbling degli eventi senza causare il comportamento di clic predefinito (la casella di controllo diventa selezionata / deselezionata) per non essere eseguita.

Entrambi i seguenti interrompono il bubbling dell'evento, ma non cambiano anche lo stato della casella di controllo:

event.preventDefault();
return false;



In angularjs questo dovrebbe funzionare:

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



Come altri hanno menzionato, prova stopPropagation() .

E c'è un secondo gestore da provare: event.cancelBubble = true; È un gestore specifico IE, ma è supportato almeno in FF. Non ne so molto, perché non l'ho usato da solo, ma potrebbe valerne la pena, se tutto il resto fallisce.




Questo è un eccellente esempio per comprendere il concetto di bubbling di eventi. In base alle risposte precedenti, il codice finale apparirà come indicato di seguito. Dove l'utente fa clic sulla casella di controllo, la propagazione dell'evento all'intestazione dell'elemento padre verrà interrotta utilizzando 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;
               }
          });     
  });



Links