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

У меня есть div, к которому я привязал событие onclick. в этом div есть тег со ссылкой. Когда я нажимаю на ссылку, событие onclick из div также запускается. Как я могу отключить это, чтобы, если ссылка нажата на div onclick, не запускается?

script:

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

ОТВЕТЫ

Ответ 2

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

Ответ 3

Лучше, используя on() с цепочкой, например,

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

Ответ 4

В ответах здесь вопрос ОР был слишком буквальным. Как эти ответы могут быть расширены в сценарий, в котором есть МНОГО дочерних элементов, а не только один тег <a>? Здесь один путь.

Скажем, у вас есть фотогалерея с затененным фоном и фотографиями, расположенными в браузере. Когда вы нажимаете черный фон (но ничего не внутри), вы хотите закрыть оверлей.

Вот несколько возможных HTML:

<div class="gallery" style="background: black">
    <div class="contents"> <!-- Let 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, поэтому галерея закроется, только когда вы нажмете в выцветшую область черного фона, но не при нажатии в области содержимого. Это может быть применено ко многим различным сценариям.

Ответ 5

Более короткий способ сделать это:

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

Ответ 6

Или это:

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