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
- JavaScriptで配列やオブジェクトの操作に使えるTips
JavaScriptで配列やオブジェクトの操作に使えるTips
- React+TypeScript(TSX)でコンポーネントを使った効率のよい静的HTMLコーディング
React+TypeScript(TSX)でコンポーネントを使った効率のよい静的HTMLコーディング
- webpackを使うVue.js 3系とTypeScriptの環境構築メモ
webpackを使うVue.js 3系とTypeScriptの環境構築メモ
- Dartで使うパッケージ管理ツールのPubからDart Sassのコンパイル環境を作成する
Dartで使うパッケージ管理ツールのPubからDart Sassのコンパイル環境を作成する
- ブロークングリッドなレイアウトをコーディングするときに使えるCSSのテクニック
ブロークングリッドなレイアウトをコーディングするときに使えるCSSのテクニック
- CSSでposition: sticky;を指定した要素の状態をJavaScriptのIntersection Observer APIで検知する
CSSでposition: sticky;を指定した要素の状態をJavaScriptのIntersection Observer APIで検知する
- GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる#2:スクロール量に連動
GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる#2:スクロール量に連動
- Vue.js 3系の導入とComposition APIを試してみる
Vue.js 3系の導入とComposition APIを試してみる
categories