Bagaimana cara menghentikan peristiwa yang menggelegak di klik kotak centang

Saya memiliki kotak centang yang ingin saya lakukan beberapa tindakan Ajax pada acara klik, namun kotak centang juga di dalam wadah dengan perilaku klik sendiri yang tidak ingin saya jalankan ketika kotak centang diklik. Sampel ini menggambarkan apa yang ingin saya lakukan:

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

Namun, saya tidak dapat menemukan cara untuk menghentikan gelembung acara tanpa menyebabkan perilaku klik default (kotak centang menjadi dicentang / tidak dicentang) untuk tidak berjalan.

Kedua hal berikut ini menghentikan acara yang menggelegak tetapi juga tidak mengubah status kotak centang:

event.preventDefault();
return false;

menggantikan

event.preventDefault();
return false;

dengan

event.stopPropagation();

event.stopPropagation ()

Menghentikan gelembung acara ke elemen induk, mencegah penangan orang tua mana pun diberitahu tentang peristiwa tersebut.

event.preventDefault ()

Mencegah browser melakukan tindakan default. Gunakan metode isDefaultPrevented untuk mengetahui apakah metode ini pernah dipanggil (pada objek acara itu).

Gunakan metode stopPropagation:

event.stopPropagation();

Jangan lupakan IE:

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

Seperti yang disebutkan orang lain, cobalah stopPropagation() .

Dan ada penangan kedua untuk dicoba: event.cancelBubble = true;Ini adalah penangan khusus IE, tetapi didukung setidaknya FF. Tidak benar-benar tahu banyak tentang itu, karena saya belum menggunakannya sendiri, tetapi mungkin layak dicoba, jika semuanya gagal.

Ini adalah contoh yang bagus untuk memahami konsep acara bubbling. Berdasarkan jawaban di atas, kode akhir akan terlihat seperti yang disebutkan di bawah ini. Di mana pengguna mengklik kotak centang, propagasi acara ke elemen induknya 'header' akan dihentikan menggunakan 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;
               }
          });     
  });

Saat menggunakan jQuery Anda tidak perlu memanggil fungsi stop secara terpisah.

Anda bisa saja kembali false ke event handler

Ini akan menghentikan acara dan membatalkan bubbling ..

Lihat juga event.preventDefault () vs. return false

Dari dokumen jQuery:

Penangan ini, oleh karena itu, dapat mencegah penangan yang didelegasikan untuk memicu dengan menelepon event.stopPropagation()atau kembali false.

Kredit ke @mehras untuk kode. Saya baru saja membuat cuplikan untuk menunjukkannya karena saya pikir itu akan dihargai dan saya ingin alasan untuk mencoba fitur itu.

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

Dalam angularjs ini harus berfungsi:

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