
jQueryで特定の要素以外をクリックした時に操作させる方法
特定の要素以外をクリックした時に何らかの機能を実行するのは、モーダルやポップアップのウィンドウを閉じたりする時に便利です。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で特定要素以外クリック時のイベントを取得するcategories
- WordPress(61)
- JavaScript(49)
- Vue.js(48)
- CSS(46)
- jQuery(34)
- Nuxt.js(22)
- Sass(21)
- Gulp(17)
- webpack(16)
- PHP(14)
- HTML(14)
- GSAP(11)
- React(10)
- Vite(9)
- Pug(9)
- Laravel(8)
- Cordova(8)
- Linux(7)
- Next.js(6)
- Apache(5)
- Shopify(4)
- REST API(4)
- Node.js(4)
- Smarty(3)
- Git(3)
- JSON(3)
- その他プログラミング(3)
- Google Apps API(3)
- Bootstrap(3)
- 環境構築・システム(3)
- TypeScript(2)
- EJS(2)
- RMS(2)
- Docker(2)
- Instagram API(2)
- Excel VBA(2)
- SVG(1)
- Dart(1)
- ECカートASP(1)
- Markdown(1)
- AMP(1)
- Nginx(1)
- XML(1)
- shellscript(1)
- Ruby(1)
- MySQL(1)