jquery dừng sự kiện kích hoạt cha mẹ

Tôi có một div mà tôi đã đính kèm một onclicksự kiện. trong div này có một thẻ với một liên kết. Khi tôi nhấp vào liên kết, onclicksự kiện từ div cũng được kích hoạt. Làm thế nào tôi có thể vô hiệu hóa điều này để nếu liên kết được nhấp vào div onclickkhông bị bắn?

kịch bản:

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

Mã HTML:

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

Làm cái này:

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

Nếu bạn muốn đọc thêm về .stopPropagation (), xem tại đây .

Hoặc, thay vì có một trình xử lý sự kiện bổ sung để ngăn chặn một trình xử lý khác, bạn có thể sử dụng đối số Sự kiện đối tượng được chuyển đến trình xử lý sự kiện nhấp chuột của bạn để xác định xem một đứa trẻ có được nhấp hay không. targetsẽ là phần tử được nhấp và currentTargetsẽ là div .header:

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

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

Cách tốt hơn bằng cách sử dụng on () với chuỗi như,

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

Các câu trả lời ở đây lấy câu hỏi của OP quá đúng theo nghĩa đen. Làm thế nào những câu trả lời này có thể được mở rộng thành một kịch bản có NHIỀU phần tử con, không chỉ là một <a>thẻ? Đây là một cách.

Giả sử bạn có một bộ sưu tập ảnh với nền bị bôi đen và các ảnh ở giữa trình duyệt. Khi bạn nhấp vào nền đen (nhưng không phải bất cứ thứ gì bên trong nó), bạn muốn lớp phủ đóng lại.

Đây là một số HTML có thể:

<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>

Và đây là cách JavaScript hoạt động:

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

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

Điều này sẽ dừng các sự kiện nhấp chuột từ các yếu tố bên trong .contentstừ mọi nghiên cứu .galleryđể thư viện sẽ chỉ đóng khi bạn nhấp vào khu vực nền đen mờ, nhưng không phải khi bạn nhấp vào khu vực nội dung. Điều này có thể được áp dụng cho nhiều kịch bản khác nhau.

Tôi vấp phải câu hỏi này, tìm kiếm một câu trả lời khác.

Tôi muốn ngăn chặn tất cả trẻ em kích hoạt cha mẹ.

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

Hoặc này:

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

Giải pháp đơn giản nhất là thêm CSS này cho trẻ em:

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

Một cách ngắn hơn để làm điều đó:

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