JavaScript 備忘録 | メシのタネ

shiraberu
このエントリーをはてなブックマークに追加

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

 2014/05/28

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

例えば、クリックした場所でおもむろに
君が好きだと叫びたいと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

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


このエントリーをはてなブックマークに追加

コメント

"【jQuery】クリックしたタグが何か調べる方法"
でメシのタネのおすすめを検索したよ!

プログラミング備忘録 | メシのタネ