jquery stop child เรียกเหตุการณ์ผู้ปกครอง

ฉันมี div ที่ฉันได้แนบonclickกิจกรรมไป ใน div นี้มีแท็กพร้อมลิงค์ เมื่อฉันคลิกลิงก์onclickกิจกรรมจาก div ก็จะถูกเรียกใช้ ฉันจะปิดการใช้งานสิ่งนี้ได้อย่างไรหากการเชื่อมโยงถูกคลิกที่ 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จะเป็น. header div:

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

     $(this).children(".children").toggle();
});

วิธีที่ดีกว่าโดยใช้บน ()กับการผูกมัดเช่น

$(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ดังนั้นแกลเลอรีจะปิดเฉพาะเมื่อคุณคลิกในพื้นที่พื้นหลังสีดำจาง ๆ แต่จะไม่หยุดเมื่อคุณคลิกในพื้นที่เนื้อหา สิ่งนี้สามารถนำไปใช้กับสถานการณ์ต่าง ๆ มากมาย

ฉันสะดุดกับคำถามนี้โดยมองหาคำตอบอื่น

ฉันต้องการป้องกันไม่ให้เด็กทุกคนเรียกพ่อแม่

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

หรือสิ่งนี้:

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