[JQUERY] 체크 박스를 클릭에 이벤트 버블 링을 중지하는 방법

체크 박스를 클릭에 이벤트 버블 링을 중지하는 방법

해결법

1. ---

   1.바꾸다

   바꾸다

   event.preventDefault();
   return false;
   

   와

   event.stopPropagation();
   

   event.stopPropagation ()

   에서는 event.preventDefault ()

2. ---

   2.stopPropagation 메소드를 사용합니다 :

   stopPropagation 메소드를 사용합니다 :

   event.stopPropagation();
   

3. ---

   3.IE를 잊지 마세요 :

   IE를 잊지 마세요 :

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

4. ---

   4.jQuery를 사용하는 경우 당신은 정지 기능이 분리 호출 할 필요는 없습니다.

   jQuery를 사용하는 경우 당신은 정지 기능이 분리 호출 할 필요는 없습니다.

   당신은 이벤트 처리기에 거짓을 반환 할 수 있습니다

   이 이벤트를 중지하고 버블 링을 취소합니다 ..

   또한에서는 event.preventDefault () 대 리턴 거짓 참조

   JQuery와 워드 프로세서 :

5. ---

   5.다른 언급했듯이, 인 stopPropagation을 시도 ().

   다른 언급했듯이, 인 stopPropagation을 시도 ().

   그리고 시도하는 두 번째 핸들러가 : event.cancelBubble 사실 =이; 그것은 IE의 특정 핸들러, 그러나 그것은 적어도 FF에서 지원됩니다. 내가 나 자신을 사용하지 않은 것처럼 정말 많이 모르는,하지만 다른 모든 실패 할 경우는, 가치가 촬영 될 수 있습니다.

6. ---

   6.이 이벤트 버블 링의 개념을 이해하기위한 좋은 예입니다. 위의 답변을 바탕으로, 최종 코드는 아래에 언급 한 바와 같이합니다. 체크 박스의 부모 요소 '헤더'로 이벤트 전파의 사용자 클릭이 event.stopPropagation 사용을 중단 할 위치 ();

   이 이벤트 버블 링의 개념을 이해하기위한 좋은 예입니다. 위의 답변을 바탕으로, 최종 코드는 아래에 언급 한 바와 같이합니다. 체크 박스의 부모 요소 '헤더'로 이벤트 전파의 사용자 클릭이 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;
                  }
             });     
     });
   

7. ---

   7.코드에 대한 @mehras에 감사드립니다. 내가 그 주시면 감사하겠습니다 생각 나는 그 기능을 시도하는 변명을하고 싶었 기 때문에 나는 단지 그것을 증명하기 위해 조각을 만들었습니다.

   코드에 대한 @mehras에 감사드립니다. 내가 그 주시면 감사하겠습니다 생각 나는 그 기능을 시도하는 변명을하고 싶었 기 때문에 나는 단지 그것을 증명하기 위해 조각을 만들었습니다.

   $ (문서) .ready (함수 () { $ ( '# 용기') addClass ( '숨겨진.'); $ ( '# 헤더'). ((기능을 클릭) { 경우 ($ ( '# 컨테이너'). hasClass ( '숨겨진')) { $ ( '# 용기') removeClass ( '숨겨진.'); } 다른 { $ ( '# 용기') addClass ( '숨겨진.'); } }); $ ( '# 헤더 입력 [TYPE = 선택란]). 클릭 (함수 (이벤트) { (event.stopPropagation) {// 표준 경우 event.stopPropagation (); } 다른 {// IE6-8 event.cancelBubble 사실 =; } }); }); DIV { 텍스트 정렬 : 센터; 패딩 : 2EM; 글꼴 크기 : 1.2em } .hidden { 표시 : 없음; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

   선택란하지 거품 이벤트 것이지만이 텍스트 것이다.

   최대 버블) (클릭!

8. ---

   8.에서이해야 작품을 AngularJS와 :

   에서이해야 작품을 AngularJS와 :

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

from https://stackoverflow.com/questions/1164213/how-to-stop-event-bubbling-on-checkbox-click by cc-by-sa and MIT license