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

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

---

The answers here took the OP's question too literally. How can these answers be expanded into a scenario where there are MANY child elements, not just a single <a> tag? Here's one way.

Let's say you have a photo gallery with a blacked out background and the photos centered in the browser. When you click the black background (but not anything inside of it) you want the overlay to close.

Here's some possible 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>

And here's how the JavaScript would work:

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

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

This will stop the click events from elements inside .contents from every research .gallery so the gallery will close only when you click in the faded black background area, but not when you click in the content area. This can be applied to many different scenarios.

---

I stumbled upon this question, looking for another answer.

I wanted to prevent all children from triggering the parent.

This is the easiest, most readable method for that:

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

---

Or this:

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

---

A more short way to do it:

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

---

The simplest solution is to add this CSS to the children:

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

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