jQueryで指定要素以外の要素をクリックした時の処理を書く

1. 概要

表示中のプルダウンを、プルダウン以外の場所をクリックしたらプルダウンを非表示にする
という処理をご紹介します。

文章だけだとイメージしづらいので、Excelを例にすると、
「検索と選択」というメニューを表示中に

別の場所をクリックすると表示していたメニューが消える

みたいな処理をjQueryで書いてみました。

2. 処理の流れ

コードをご紹介する前に、
先ほどのExcelのプルダウンを例にして、どのような手順で処理をしていくかを説明します。

1. 全てのクリックイベントを取得
2-a. クリックした要素がプルダウン以外の時の処理
2-b. クリックした要素がプルダウン内の時の処理

これを元にコードを書いていきます！

3. コード

2.でご紹介した処理を元に書いたコードが以下のようになります。

$(document).click(function(event) {
    if(!$(event.target).closest('#targetId').length){
        //プルダウン範囲外の処理
    }
    else{
        //プルダウン範囲内の処理
    }
});

1. 全てのクリックイベントを取得

$(document).click(function(event) {

ソースを読み込んだファイル全体のクリックイベントを取得します。
$(event.target)でクリックしたイベントそのものを取得することもできます。

2-a. クリックした要素がプルダウン以外の時の処理

if(!$(event.target).closest('#targetId').length){

※ここではプルダウンのソースがhtmlだと仮定します。
closestメソッドを用いることによって、クリックした箇所に最も近い指定要素かどうかを判定します。
closestメソッドは要素が見つかった時点で探索を終了するため、parentsメソッドよりも処理時間が早いです。

2-b. クリックした要素がプルダウン内の時の処理

割愛

4. まとめ

以上が指定要素以外の要素をクリックした時の処理でした。
ざっくりまとめると、
1. 全てのクリックイベントを取得
2. 指定要素かどうかを判定
という流れです。

参考
api.jquery.com
qiita.com

にほんブログ村