Onay kutusu tıklamasında olay köpürme nasıl durdurulur

Ben tıklama olayında bazı Ajax eylemi gerçekleştirmek istiyorum bir onay kutusu var, ancak onay kutusu da onay kutusu tıklatıldığında çalıştırmak istemiyorum kendi tıklama davranışı olan bir kapsayıcı içinde. Bu örnek ne yapmak istediğimi göstermektedir:

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

Ancak, varsayılan tıklama davranışının (onay kutusu işaretli / işaretli değil) çalışmasına neden olmadan olay köpürmeyi nasıl durduracağımı anlayamıyorum.

Aşağıdakilerin her ikisi de olayın köpürmesini durdurur, ancak onay kutusu durumunu değiştirmez:

event.preventDefault();
return false;

değiştirmek

event.preventDefault();
return false;

ile

event.stopPropagation();

Event.stopPropagation ()

Bir olayın üst öğelere köpürmesini durdurarak, üst işleyicilerin olaya bildirilmesini önler.

event.preventDefault ()

Tarayıcının varsayılan işlemi gerçekleştirmesini önler. Bu yöntemin hiç çağrılıp çağrılmadığını (o olay nesnesinde) bilmek için isDefaultPrevented yöntemini kullanın.

StopPropagation yöntemini kullanın:

event.stopPropagation();

IE'yi unutmayın:

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

Diğerlerinin de belirttiği gibi, deneyin stopPropagation().

Denemek için ikinci bir işleyici var: event.cancelBubble = true;IE'ye özel bir işleyici, ancak en azından FF'de destekleniyor. Kendim kullanmadığım için gerçekten fazla bir şey bilmiyorum, ama her şey başarısız olursa, denemeye değer olabilir.

Bu, olay köpürme konseptini anlamak için mükemmel bir örnektir. Yukarıdaki cevaplara dayanarak, son kod aşağıda belirtildiği gibi görünecektir. Kullanıcı onay kutusunu tıkladığında, olayın üst öğesi olan 'header' öğesine yayılması durdurulur 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;
               }
          });     
  });

JQuery kullanırken ayrı bir durdurma işlevi çağırmanız gerekmez.

Sadece falseolay işleyicisine dönebilirsiniz

Bu olayı durduracak ve köpürmeyi iptal edecektir.

Ayrıca bkz. Event.preventDefault () ve return false

JQuery dokümanlarından:

Bu nedenle, bu işleyiciler devredilen işleyicinin arayarak event.stopPropagation()veya geri dönerek tetiklenmesini engelleyebilir false.

Kredi @mehras kodu. Bunu göstermek için sadece bir pasaj oluşturdum çünkü bunun takdir edileceğini düşündüm ve bu özelliği denemek için bir bahane istedim.

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

Angularjs'de bunun çalışması gerekir:

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