JQuery остановить дочерний запуск родительского события

У меня есть div, к которому я прикрепил 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 (), посмотрите здесь .

Или вместо того, чтобы иметь дополнительный обработчик событий для предотвращения другого обработчика, вы можете использовать аргумент Event Object, передаваемый вашему обработчику события click, чтобы определить, был ли выбран дочерний элемент. 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();
   });
});

Ответы здесь восприняли вопрос ОП слишком буквально. Как эти ответы можно расширить в сценарий, где есть МНОГИЕ дочерние элементы, а не просто один<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();
    });
});