jquery 중지 하위 이벤트 트리거링

jquery 중지 하위 이벤트 트리거링

저는 제가 첨부한 디브가 있습니다.onclick이 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()에 대한 자세한 내용을 보려면 여기를 참조하십시오.

또는 다른 핸들러를 방지하기 위해 이벤트 핸들러를 추가하는 대신 클릭 이벤트 핸들러에 전달된 이벤트 개체 인수를 사용하여 하위가 클릭되었는지 여부를 확인할 수 있습니다.target클릭된 요소가 됩니다.currentTarget.dll 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();
   });
});

저는 다른 답을 찾다가 우연히 이 질문을 발견했습니다.

모든 아이들이 부모를 자극하는 것을 막고 싶었습니다.

JavaScript:

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

여기서의 대답은 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따라서 색이 바랜 검은색 배경 영역을 클릭할 때만 갤러리가 닫히고 내용 영역을 클릭할 때는 닫히지 않습니다.이는 다양한 시나리오에 적용할 수 있습니다.

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

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

또는 다음과 같습니다.

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

언급URL : https://stackoverflow.com/questions/2364629/jquery-stop-child-triggering-parent-event