【javascript】要素の範囲外をクリックした時の処理を実装する | .closest()

JavaScriptで特定要素の領域外をクリックしたときのイベント処理です。

特定要素外のクリックイベント

※当処理では、jQueryを使用しています。

www.it-the-best.com

.closest()

closestメソッドを使用して、特定要素外のクリックを判断します。

closest() メソッドは、要素とその親 (文書ルートに向かって) を、指定されたセレクター文字列に一致するノードが見つかるまで探索します。自分自身または一致する祖先を返します。そのような要素が存在しない場合は、 null を返します。

developer.mozilla.org

デモ 

メニューバーをイメージしたデモです。対象要素のクリックで開く処理を行い、要素の領域外のクリックで閉じます。

 

コード

let target=$(element);
target.click((event)=>{
    // 指定対象要素のクリックイベント
});
$(document).on("click", (e) => {
    if ($(e.target).closest(target).length<1) { 
        // 指定要素外のクリックイベント
    }
});

Copy

サンプル

指定要素外のクリックイベント HTML CSS JS

 

<div>
    <div id="maincode-sample">
        <div id="maincode-sample-target"></div>
    </div>
</div>

#{sample}{
    width: 100%;
    background: #f2f2f2;
}
#{sample_target}{
    width: 55px;
    background: #5a5a5a;
    transition:all .3s;
    position: relative;
}
#{sample_target}::after {
    content: ">";
    color: white;
    font-weight:bold;
    position: absolute;
    right: 10px;
}
#{sample_target}.toggle-on{
    width:80%;
}
#{sample_target}.toggle-on::after{
    content:"<";
}

let target=$("#{sample_target}");
target.click((event)=>{
    target.toggleClass("toggle-on");
});
$(document).on("click", (e) => {
    if ($(e.target).closest(target).length<1) { // 要素外の場合
        target.removeClass("toggle-on");
    }
});