js,jquery 任意のセレクターを除く…イベント設定（is()、matches()）

jquery / .is()

$(document).on('click','.hoge', function() {
    if ( !$(this).is('#not-hoge') ) {
        // 「#not-hoge」以外の処理
    }
});

ネイティブのjavascript / .matches()

let elms_hoge = document.querySelectorAll('.hoge');
elms_hoge.forEach(elm => {
    elm.addEventListener('click', function(event) {
        if (!event.target.matches('#not-hoge')) {
            // 「#not-hoge」以外の処理
        }
    });
});

複数の条件のとき

上記は「id: #not-hoge」を除外したけど、「クラス: not-foo」「タグ: span」で絞ることも可能

// 省略
if ( !event.target.matches('.not-foo') && !event.target.matches('span') ) {
// 省略

※jqueryも同様

▼下記のようなまとめた記述で問題なし

// 省略
if ( !event.target.matches('span.not-foo') ) {
// 省略

※jqueryも同様

複数のクラスを持つとき

event.target.matches('.not-bar.not-foo')

親子関係

対象の親要素の判断は可能だけど、子要素の判断は出来ないらしい

▼htmlの例

<div class="aaa"><div class="not-hoge">

▼チェックしたい例

elm.matches('.aaa .not-hoge')

elmが親要素で子要素に対象が存在…はチェック不可

elmが「class="aaa"」のとき「false」
→子要素をマルっと取得して、その子要素をそれぞれチェックする感じの処理が必要

elmが子要素で親要素に対象が存在…はチェックOK

elmが「class="not-hoge"」のとき「true」