[JQUERY] 상위 이벤트를 트리거 JQuery와 정지 아이

상위 이벤트를 트리거 JQuery와 정지 아이

해결법

1. ---

   1.이 작업을 수행:

   이 작업을 수행:

   $(document).ready(function(){
       $(".header").click(function(){
           $(this).children(".children").toggle();
       });
      $(".header a").click(function(e) {
           e.stopPropagation();
      });
   });
   

   당신이 더 많은 .stopPropagation에 읽고 싶은 경우 (), 이쪽을 봐주세요.

2. ---

   2.또는, 오히려 다른 핸들러를 방지하기 위해 별도의 이벤트 핸들러를하는 것보다, 당신은 아이가 클릭되었는지 여부를 확인하려면 클릭 이벤트 핸들러에 전달되는 이벤트 객체 인수를 사용할 수 있습니다. 대상은 클릭 된 요소가 될 것이며, currentTarget은 .header DIV 될 것입니다 :

   또는, 오히려 다른 핸들러를 방지하기 위해 별도의 이벤트 핸들러를하는 것보다, 당신은 아이가 클릭되었는지 여부를 확인하려면 클릭 이벤트 핸들러에 전달되는 이벤트 객체 인수를 사용할 수 있습니다. 대상은 클릭 된 요소가 될 것이며, currentTarget은 .header DIV 될 것입니다 :

   $(".header").click(function(e){
        //Do nothing if .header was not directly clicked
        if(e.target !== e.currentTarget) return;
   
        $(this).children(".children").toggle();
   });
   

3. ---

   3.같은 체인에 ()에 사용하여 더 나은 방법,

   같은 체인에 ()에 사용하여 더 나은 방법,

   $(document).ready(function(){
       $(".header").on('click',function(){
           $(this).children(".children").toggle();
       }).on('click','a',function(e) {
           e.stopPropagation();
      });
   });
   

4. ---

   4.여기에 대한 대답도 그대로 OP의 질문을했다. 많은 자식 요소뿐만 아니라 하나의 태그가 어디에 어떻게 이러한 답변은 시나리오로 확장 될 수 있는가? 여기 하나의 방법입니다.

   여기에 대한 대답도 그대로 OP의 질문을했다. 많은 자식 요소뿐만 아니라 하나의 태그가 어디에 어떻게 이러한 답변은 시나리오로 확장 될 수 있는가? 여기 하나의 방법입니다.

   하자 당신이 기절 배경 및 브라우저 중앙에있는 사진과 함께 사진 갤러리를 말한다. 당신은 검은 색 (그러나 그것의 아무것도 내부)을 클릭하면 가까이에 오버레이를 원한다.

   다음은 몇 가지 가능한 HTML입니다 :

   <div class="gallery" style="background: black">
       <div class="contents"> <!-- Let's say this div is 50% wide and centered -->
           <h1>Awesome Photos</h1>
           <img src="img1.jpg"><br>
           <img src="img2.jpg"><br>
           <img src="img3.jpg"><br>
           <img src="img4.jpg"><br>
           <img src="img5.jpg">
       </div>
   </div>
   

   그리고 여기에 자바 스크립트가 작동 할 방법은 다음과 같습니다

   $('.gallery').click(
       function()
       {
           $(this).hide();
       }
   );
   
   $('.gallery > .contents').click(
       function(e) {
           e.stopPropagation();
       }
   );
   

   이것은 모든 연구 .gallery에서 .contents 내부 요소의 클릭 이벤트를 중지 그래서 갤러리 닫히지 만이 바랜 검은 배경 영역을 클릭,하지만 당신은 컨텐츠 영역을 클릭하지 않을 경우시. 이것은 많은 다른 시나리오에 적용 할 수 있습니다.

5. ---

   5.나는 다른 대답을 찾고,이 질문에 우연히.

   나는 다른 대답을 찾고,이 질문에 우연히.

   나는 부모를 트리거에서 모든 어린이를 방지하고 싶었다.

   자바 스크립트 :

   document.getElementById("parent").addEventListener("click",  function (e) {
       if (this !== event.target) return;
       // Do something
   });
   

   jQuery를 :

   $("#parent").click(function () {
       // Do something
   }).children().on("click", function (e) {
       e.stopPropagation();
   });
   

6. ---

   6.아니면 이거:

   아니면 이거:

   $(document).ready(function(){
       $(".header").click(function(){
           $(this).children(".children").toggle();
       });
      $(".header a").click(function(e) {
           return false;
      });
   });
   

7. ---

   7.가장 간단한 해결책은 아이들이 CSS를 추가하는 것입니다 :

   가장 간단한 해결책은 아이들이 CSS를 추가하는 것입니다 :

   .your-child {
       pointer-events: none;
   }
   

from https://stackoverflow.com/questions/2364629/jquery-stop-child-triggering-parent-event by cc-by-sa and MIT license