jquery子を停止して親イベントをトリガー

onclickイベントをアタッチしたdivがあります。この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>

これを行う：

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

あなたがしたい場合は.stopPropagation（）に続きを読む、ここを見て。

または、別のハンドラーを防ぐために追加のイベントハンドラーを用意するのではなく、クリックイベントハンドラーに渡されたイベントオブジェクト引数を使用して、子がクリックされたかどうかを判断できます。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();
   });
});

ここでの答えは、OPの質問を文字通りに捉えすぎていました。これらの回答を、単一の<a>タグだけでなく、多くの子要素があるシナリオに拡張するにはどうすればよいですか？これが1つの方法です。

たとえば、背景が黒く、写真がブラウザの中央に配置されているフォトギャラリーがあるとします。黒い背景をクリックすると（その内部ではなく）、オーバーレイを閉じます。

可能な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();
    });
});