jQueryで特定の要素以外をクリックした時に操作させる方法
最終更新日: Update!!
特定の要素以外をクリックした時に何らかの機能を実行するのは、モーダルやポップアップのウィンドウを閉じたりする時に便利です。jQueryを使うことで簡単に実装できるので備忘録としてのメモです。
クリックイベントでクリックされた要素を取得し条件分岐させる
まずはサンプルのコードです。ターゲットとなる特定の要素にはidもしくはclassを振っておきます。javascriptの方はクリックイベントで「e」というイベントオブジェクトでクリックした要素を取得し、その要素がターゲットとなる要素の中に含まれているかをclosestで判別します。 【HTML】(一部抜粋)<div class="wrap"> <div id="clickTarget">ターゲット要素 </div> </div>【javascript】
$(document).on('click',function(e) { if(!$(e.target).closest('#clickTarget').length) { // ターゲット要素の外側をクリックした時の操作 } else { // ターゲット要素をクリックした時の操作 } });いろいろと使いどころは多いので、重宝しそうですね!ユーザビリティ向上に活用してみてはいかがでしょうか。今回のサンプルはこちらに上げておりますのでご参考に! (参考) jQueryで特定要素以外クリック時のイベントを取得する
sponserd
keyword search
recent posts
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
- ViteでHandlebarsを使った複数ページの作成に使える外部JSONファイルのデータを読み込む
ViteでHandlebarsを使った複数ページの作成に使える外部JSONファイルのデータを読み込む
- ViteでTailwindCSSとテンプレートエンジンのHandlebarsを使ったページコーディング
ViteでTailwindCSSとテンプレートエンジンのHandlebarsを使ったページコーディング
- ViteでPostCSS周りの設定やSassを使う
ViteでPostCSS周りの設定やSassを使う
- フロントエンドの開発環境にVite + TypeScriptを導入する
フロントエンドの開発環境にVite + TypeScriptを導入する
categories