확인란 클릭시 이벤트 버블 링을 중지하는 방법

클릭 이벤트에 대해 Ajax 작업을 수행하려는 확인란이 있지만 확인란을 클릭 할 때 실행하고 싶지 않은 자체 클릭 동작이있는 컨테이너 내부에도 확인란이 있습니다. 이 샘플은 내가하고 싶은 일을 보여줍니다.

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

그러나 기본 클릭 동작 (확인란이 선택되거나 선택되지 않음)이 실행되지 않고 이벤트 버블 링을 중지하는 방법을 알 수 없습니다.

다음 두 가지 모두 이벤트 버블 링을 중지하지만 확인란 상태도 변경하지 않습니다.

event.preventDefault();
return false;

바꾸다

event.preventDefault();
return false;

와

event.stopPropagation();

event.stopPropagation ()

상위 요소에 대한 이벤트 버블 링을 중지하여 상위 핸들러가 이벤트에 대한 알림을받지 못하게합니다.

event.preventDefault ()

브라우저가 기본 조치를 실행하지 못하게합니다. isDefaultPrevented 메소드를 사용하여이 메소드가 해당 이벤트 오브젝트에서 호출되었는지 여부를 알 수 있습니다.

stopPropagation 메소드를 사용하십시오.

event.stopPropagation();

IE를 잊지 마십시오 :

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

다른 사람들이 언급했듯이을 시도하십시오 stopPropagation().

그리고 시도해야 할 두 번째 처리기가 있습니다. event.cancelBubble = true;IE 고유의 처리기이지만 적어도 FF에서 지원됩니다. 내가 직접 사용하지 않았으므로 그것에 대해 많이 알지 못하지만 다른 모든 것이 실패하면 기회가 될 수 있습니다.

이것은 이벤트 버블 링 개념을 이해하기위한 훌륭한 예입니다. 위의 답변을 바탕으로 최종 코드는 다음과 같습니다. 사용자가 확인란을 클릭하면 상위 요소 'header'에 대한 이벤트 전파가를 사용하여 중지됩니다 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를 사용할 때는 중지 함수를 별도로 호출 할 필요가 없습니다.

false이벤트 핸들러로 돌아올 수 있습니다.

이벤트가 중지되고 버블 링이 취소됩니다.

event.preventDefault () 및 false 반환을 참조하십시오.

jQuery 문서에서 :

따라서 이러한 핸들러는를 호출 event.stopPropagation()하거나 return 하여 위임 된 핸들러가 트리거되지 않도록 할 수 있습니다 false.

코드 는 @mehras 에게 감사드립니다 . 나는 그것이 좋을 것이라고 생각하고 그 기능을 시도 할 변명을 원했기 때문에 그것을 보여주기 위해 스 니펫을 만들었습니다.

$(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에서는 다음과 같이 작동합니다.

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