[jQuery]セレクタから子要素を除外したい場合

知らないと詰むやつ。

どういうことか
やっていく

どういうことか

こういうのがあったとする。

<div class="parent">
    <button class="child">click</button>
</div>

親要素（.parent）をクリックしたときの効果をjsで付ける。

このとき子要素（.child）をクリックすると、親要素のjsが発火する。

セレクタは親要素だけ指定していても、構造的に子要素が親要素の領域内に入っていたら発火する。

子要素をクリックしたときは親要素のjsは発火しないようにしたい。

そういう話。

やっていく

こうする。

$(function(){
    $(document).on('click','.parent',function(){
        /* 処理内容 */
    })
    $(document).on('click','.child',function(e){
        e.stopPropagation();
        /* 処理内容 */
    })
})

親子の書く順番はどっちでもいける。

stopPropagation()は伝播させないって意味。

Event: stopPropagation() メソッド - Web API | MDN

stopPropagation() は Event インターフェイスのメソッドで、キャプチャおよびバブリング段階において現在のイベントのさらなる伝播を阻止します。しかし、これは既定の動作の発生を妨げるものではありません。例えば、リンクのクリ...

ここで理解しないといけないのは、親要素の記述内で特定子要素を弾くことができない、ということ。

子要素側で「自分は違います」を追記しなきゃいけないということ。

あと、書き方も注意。

これはダメ。

$(function(){
    $(document).on('click','.parent',function(){
        /* 処理内容 */
    })
    $('.child').on('click',function(e){
        e.stopPropagation();
        /* 処理内容 */
    })
})

セレクタを揃えてないとダメっぽかった。

どっちもセレクタは$(document)で書いておくのが無難。