jquery зупиняє батьківську подію, що запускає дитину

У мене є дів, до якого я долучив onclickподію. у цьому діві є тег із посиланням. Коли я натискаю на посилання, 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:

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

Відповіді тут сприйняли питання ОП занадто буквально. Як можна відповісти на ці відповіді в сценарій, коли є ДЛЯ дочірніх елементів, а не лише один <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();
    });
});