jQuery как остановить ребенка, вызывая родительские мероприятия

Question

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>

352 8

jQuery

8 ответов:

Comments

Ничего не найдено.

Nick Craver · Accepted Answer · 2010-03-02 18:13:10

этого:
$(document).ready(function(){
    $(".header").click(function(){
        $(this).children(".children").toggle();
    });
   $(".header a").click(function(e) {
        e.stopPropagation();
   });
});
Если вы хотите читать дальше .stopPropagation (), смотрите здесь.

xr280xr · Accepted Answer · 2016-05-19 20:52:58

или вместо того, чтобы иметь дополнительный обработчик событий для предотвращения другого обработчика, вы можете использовать Событие Объекта аргумент передается обработчику событий click, чтобы определить, был ли нажат дочерний элемент. target будет щелкнут элемент и currentTarget будет .заголовок див:
$(".header").click(function(e){
     //Do nothing if .header was not directly clicked
     if(e.target !== e.currentTarget) return;

     $(this).children(".children").toggle();
});

Rohan Kumar · Accepted Answer · 2015-07-23 13:34:45

лучше использовать on () С цепью, как,

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

Gavin · Accepted Answer · 2015-10-15 04:59:34

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

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

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

Daan · Accepted Answer · 2018-02-21 00:09:37

2

2018-02-21 00:09:37

user719004 · Accepted Answer · 2013-03-13 20:37:07

или такой:

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

Andreas 'aNdy' Berggreen · Accepted Answer · 2015-12-22 14:22:04

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

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

Pier · Accepted Answer · 2018-04-30 19:41:17

самое простое решение-добавить этот CSS к детям:
.your-child {
    pointer-events: none;
}