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

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

---

클릭 이벤트에 대해 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;
               }
          });     
  });

---

When using jQuery you do not need to call a stop function separate.

You can just return false in the event handler

This will stop the event and cancel bubbling..

Also see event.preventDefault() vs. return false

From the jQuery docs:

These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false.

---

Credit to @mehras for the code. I just created a snippet to demonstrate it because I thought that would be appreciated and I wanted an excuse to try that feature.

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

---

In angularjs this should works:

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

참고URL : https://stackoverflow.com/questions/1164213/how-to-stop-event-bubbling-on-checkbox-click