javascript - Hur man stoppar händelsebubbling vid klick på kryssruta

Jag har en kryssruta som jag vill utföra någon Ajax-åtgärd på vid klickhändelsen, men kryssrutan är också inuti en behållare med sin egen klickbeteende som jag inte vill ska köras när kryssrutan klickas. Detta exempel illustrerar vad jag vill göra:

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

Jag kan dock inte lista ut hur man stoppar event-bubblingen utan att hindra standardbeteendet vid klick (att kryssrutan blir ikryssad/avmarkerad) från att köras.

Båda följande stoppar händelsebubblandet men ändrar inte kryssrutans status:

event.preventDefault();
return false;

Svar #1

ersätta

event.preventDefault();
return false;

med

event.stopPropagation();

event.stopPropagation()

Stoppar bubblandet av ett event till överordnade element, vilket förhindrar att några överordnade hanterare blir meddelade om eventet.

event.preventDefault()

Förhindrar webbläsaren från att utföra standardåtgärden. Använd metoden isDefaultPrevented för att veta om denna metod någonsin har kallats (på det händelseobjektet).

Svar #2

Använd metoden stopPropagation:

event.stopPropagation();

Svar #3

Glöm inte IE:

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

Relaterade artiklar