メシのタネ

メシのタネになる、Laravelや設計思想の技術配信サイト


【jQuery】クリックしたタグが何か調べる方法

, ,

  1. Webプログラム
  2. javascript
  3. 【jQuery】クリックしたタグが何か調べる方法

shiraberu

クリックしたノードの属性とか取得する方法は出てくるんですけど、
今クリックしたノード(要素)が何か調べたい時ってあります。

例えば、クリックした場所でおもむろに
君が好きだと叫びたいとCSSでデコった渾身のメッセージボックスを表示したい時だとか
多くの場合、そういうときだと思います。ごめんなさい違う場合が大半だと思います。

jQueryのclickメソッドへ引数を渡す

clickメソッドに引数渡すと
イベントオブジェクトが渡せます。

イベントオブジェクトっていうやつに、
clickされた要素についての情報が入ってます。

eventobjall

これがそいつです。

イベントオブジェクトのプロパティ

イベントオブジェクトの中には
色んなプロパティが入っています。
その一部がこれです。

eventobjpropaty

プロパティっていうのは物体の一部だと思ってます。
人間で言うなら、手とか足とか口とかそういうもんだと自分で解釈してます。

targetプロパティへアクセス

この中のtargetプロパティへアクセスします。
ちなみに、targetプロパティの中身はこんなんです。
これが全部じゃないです。

eventobjtarget

ここにアクセスする為に、コードを書きます。
内容はこんな感じです。

jQuery(function(){


$("body").click(function(obj){
     console.log(obj.target); //クリックしたタグごと取得します。
     console.log(obj.target.innerHTML); //クリックしたタグの中の文章を取得します。
});


});

というように、書き方によって多少変わります。
.の後を他のやつに変えてやれば、他のやつが取得できます!

ちなみにこれらを実行するとこうなります。

objresult

地味かも知れませんが、使う機会があると思うので
クリックされた要素が何なのか知りたい時には
こんな感じで取得するのがいいかもしれませんね!


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.