Làm thế nào để ngăn chặn sự kiện sủi bọt trên hộp kiểm bấm

Tôi có một hộp kiểm mà tôi muốn thực hiện một số hành động Ajax trong sự kiện nhấp chuột, tuy nhiên hộp kiểm cũng nằm trong một thùng chứa có hành vi nhấp chuột riêng mà tôi không muốn chạy khi nhấp vào hộp kiểm. Mẫu này minh họa những gì tôi muốn làm:

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

Tuy nhiên, tôi không thể tìm ra cách ngăn chặn sự kiện sủi bọt mà không khiến hành vi nhấp mặc định (hộp kiểm bị kiểm tra / không được chọn) không chạy.

Cả hai điều sau đây đều dừng sự kiện sủi bọt nhưng cũng không thay đổi trạng thái hộp kiểm:

event.preventDefault();
return false;

thay thế

event.preventDefault();
return false;

với

event.stopPropagation();

event.stopPropagation ()

Dừng việc tạo bọt của một sự kiện cho các phần tử cha, ngăn bất kỳ trình xử lý cha mẹ nào được thông báo về sự kiện đó.

event.preventDefault ()

Ngăn chặn trình duyệt thực hiện hành động mặc định. Sử dụng phương thức isDefaultPrevented để biết liệu phương thức này có được gọi hay không (trên đối tượng sự kiện đó).

Sử dụng phương pháp stopPropagation:

event.stopPropagation();

Đừng quên IE:

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

Như những người khác đã đề cập, hãy thử stopPropagation().

Và có một trình xử lý thứ hai để thử: event.cancelBubble = true;Đó là trình xử lý cụ thể của IE, nhưng nó được hỗ trợ trong ít nhất FF. Đừng thực sự biết nhiều về nó, vì tôi đã không sử dụng nó cho mình, nhưng nó có thể đáng để thử, nếu tất cả những thứ khác đều thất bại.

Đây là một ví dụ tuyệt vời để hiểu khái niệm bong bóng sự kiện. Dựa trên các câu trả lời ở trên, mã cuối cùng sẽ trông giống như được đề cập dưới đây. Khi người dùng Nhấp vào hộp kiểm, việc truyền bá sự kiện đến phần tử chính 'tiêu đề' của nó sẽ bị dừng sử dụng 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;
               }
          });     
  });

Khi sử dụng jQuery, bạn không cần phải gọi hàm dừng riêng biệt.

Bạn chỉ có thể quay lại falsetrong xử lý sự kiện

Điều này sẽ dừng sự kiện và hủy bỏ bong bóng ..

Đồng thời xem event.preventDefault () so với return false

Từ các tài liệu jQuery:

Do đó, các trình xử lý này có thể ngăn trình xử lý được ủy quyền kích hoạt bằng cách gọi event.stopPropagation()hoặc trả lại false.

Tín dụng cho @mehras cho mã. Tôi chỉ tạo một đoạn trích để chứng minh điều đó bởi vì tôi nghĩ rằng nó sẽ được đánh giá cao và tôi muốn một cái cớ để thử tính năng đó.

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

Trong angularjs điều này sẽ hoạt động:

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