ksk1015のブログ

html, css, javascript 等のウェブ制作の技術をブログしてきます。あばばばばば。

特定の要素以外で発生したイベントをキャッチする(jQuery Advent Calendar 2014 jQuery)

jQuery Advent Calendar 2014 の6日目の記事です。

空いていたので書きます。

特定の要素で発生したイベントで処理行う場合は

と書きます。普通ですね。

特定の要素以外で発生したイベントで処理行う場合は、こんなふうに書けます

解説

documentにイベントリスナー貼ると、どこでイベントが発生してもキャッチできます。
(バブリングするイベントの場合ですが。 イベントバブリングについて解説した記事

そしてイベントオブジェクトからイベント発生元の要素を取得できます。

その要素自体またはその要素が指定セレクタ内かどうかは、.closest()メソッドで簡単に判定できます。

ドロップダウンメニューみたいなUIの閉じる処理、それ以外がクリックされたときは閉じたいけど、操作不能にはしたくないときとかで使ったりします。

調べてみたらjQueryUIのSelectmenuも同じふうに閉じる処理書いてます。

以上です