jquery 하위 이벤트 상위 이벤트 트리거

onclick이벤트를 첨부 한 div가 있습니다 . 이 div에는 링크가있는 태그가 있습니다. 링크를 클릭하면 onclickdiv 의 이벤트도 트리거됩니다. 링크를 클릭하면 div onclick가 실행되지 않도록 어떻게 비활성화 할 수 있습니까?

스크립트:

$(document).ready(function(){
    $(".header").bind("click", function(){
         $(this).children(".children").toggle();
    });
})

html 코드 :

<div class="header">
    <a href="link.html">some link</a>
    <ul class="children">
        <li>some list</li>
    </ul>
</div>

이 작업을 수행:

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

당신이 할 경우 더 .stopPropagation 읽어 (), 이쪽을 봐주세요 .

또는 다른 처리기를 방지하기 위해 추가 이벤트 처리기를 갖지 않고 click 이벤트 처리기에 전달 된 Event Object 인수를 사용하여 자식의 클릭 여부를 확인할 수 있습니다. target클릭 한 요소가되고 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();
});

체인과 함께 on () 을 사용하여 더 나은 방법

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

여기에 대한 답변은 OP의 질문을 문자 그대로 받아 들였습니다. 이러한 답변을 단일 <a>태그 뿐만 아니라 많은 하위 요소가있는 시나리오로 어떻게 확장 할 수 있습니까? 한 가지 방법이 있습니다.

배경이 검게 표시된 사진 갤러리가 있고 브라우저의 중앙에 사진이 있다고 가정 해 봅시다. 검은 색 배경을 클릭하면 (배경 안에는 없음) 오버레이를 닫고 싶습니다.

가능한 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>

JavaScript는 다음과 같이 작동합니다.

$('.gallery').click(
    function()
    {
        $(this).hide();
    }
);

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

이렇게하면 .contents모든 조사에서 내부 요소의 클릭 이벤트가 중지 .gallery되므로 어두운 검정색 배경 영역을 클릭 할 때만 갤러리가 닫히지 만 컨텐츠 영역을 클릭하면 갤러리가 닫히지 않습니다. 이것은 많은 다른 시나리오에 적용될 수 있습니다.

나는이 질문에 걸려 다른 대답을 찾았습니다.

모든 어린이 가 부모를 촉발 하지 못하도록 하고 싶었습니다 .

자바 스크립트 :

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();
});

아니면 이거:

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

가장 간단한 해결책은이 CSS를 자식에 추가하는 것입니다.

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

더 짧은 방법 :

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