jQueryで「自身の要素」のみイベントを起こす方法。親子の要素にも影響しない。

 この記事は約2分で読めます。
JavaScript
こんにちは、長谷川です。

今回は、要素に対してクリックなどのイベントを
親要素や子要素を無視し、その要素のみイベントを起こす方法を書いていきます。

使い道は、最近流行りのモーダルを表示している状態から
背景をクリックするとモーダルウィンドウが消えるという処理などです。

jQueryでその要素のみイベントを起こす方法!


今回のテーマの自身の要素をクリックした時のみの処理は、
jQueryではないですね笑

JavaScriptの書き方なので
jQueryを使ってない方でも使用可能です。

分かりやすい例

 

 
試しに、上記のようなプログラムを作りました。
先ほどその要素のみを返す方法で出てきた
targetとcurrentTargetを出力してみました。

自分の要素をクリックしたとき

 
青色の要素を自分の要素としてみました。
黄色が親、赤が子の関係です。

 
targetもcurrentTargetも
クリックした要素でした。

 

子の要素をクリックした時

青色の要素(自分の要素)にクリックイベントを追加すると
子の要素(青色の要素からみて)をクリックした時も
イベントが発生します。

 
 
赤色をクリックした時に出力された
内容を見てみましょう。

 
targetに子の要素 currentTargetにイベントを追加した要素が出力されました。

スポンサーリンク


イベントをトリガーした要素は、targetで、
イベントを追加した要素がcurrentTargetです。

この二つが一致した時は、
自身の要素をクリックしたとき、

一致しなかった場合は、
自身の要素がクリックされていないと分かりますね。

おわりに

自身の要素かどうか判断するには
イベントのtargetとcurrentTargetを比較して分岐することで
分かりました。

ライブラリやフレームワークを使わないと多少面倒臭い気がしますね。
Vue.jsなんて

たったの一行で出来るのでかなり楽ですよね。

まあ、targetとcurrentTargetの関係もよく分かったので
満足しています^ – ^



以上です。
最後まで読んでいただき、ありがとうございました。

 

       
   
コメントはまだありません

コメントを残す

jsファイルかvue呼び出す
HTML5
Canvasで超簡単に点線・破線を引く方法!JavaScript

こんにちは、 今回はCanvasで点線、破線を簡単に引く方法を ご紹介致します。 なんとリファレンス …

JavaScript
classとidの取得する値が違ってエラーと対処法。JavaScript

JavaScriptである処理をしようとしていたのですが、 idでは出来てclassやNameではエ …

JavaScript
Javascript、配列からランダムに取り出し重複させない書き方『超強引かつ分かり易い』

 皆さんこんにちは!はせです。JavaScriptを今開発で使っているのですが、配列からラ …