JQuery остановить дочерний запуск родительского события - PullRequest
188 голосов
/ 02 марта 2010

У меня есть 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>

Ответы [ 8 ]

387 голосов
/ 02 марта 2010

Сделайте это:

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

Если вы хотите , читайте больше о .stopPropagation (), посмотрите здесь .

81 голосов
/ 27 апреля 2016

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

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

$(document).ready(function(){
    $(".header").on('click',function(){
        $(this).children(".children").toggle();
    }).on('click','a',function(e) {
        e.stopPropagation();
   });
});
3 голосов
/ 15 октября 2015

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

2 голосов
/ 21 февраля 2018

Я наткнулся на этот вопрос, ища другой ответ.

Я хотел запретить всем детям запуск родителя.

Это самый простой и читаемый метод для этого:

$(".parent").click(function() {
    // Do something
}).children().on("click", function(e) {
    e.stopPropagation();
});
0 голосов
/ 30 апреля 2018

Самое простое решение - добавить этот CSS для детей:

.your-child {
    pointer-events: none;
}
0 голосов
/ 22 декабря 2015

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

$('.header').on('click', function () {
    $(this).children('a').on('click', function(e) {
        e.stopPropagation();
        $(this).siblings('.children').toggle();
    });
});
0 голосов
/ 13 марта 2013

Или это:

$(document).ready(function(){
    $(".header").click(function(){
        $(this).children(".children").toggle();
    });
   $(".header a").click(function(e) {
        return false;
   });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...