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


У меня есть div, который я прикрепил onclick событие в. в этом div есть тег со ссылкой. Когда я нажимаю ссылку, 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>

164


источник


Ответы:


Сделай это:

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

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


357



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

59



Лучше, используя на()  с цепью вроде,

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

15



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


3



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

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

1



Или это:

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

0



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

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

Это самый простой и удобный для чтения способ:

$(".parent").click(function() {
    // Do something
}).children().on("click", function(e) {
    e.stopPropagation();
});

0



The simplest solution is to add this CSS to the children:

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

0