Blog

jQueryでwebサイト上でクリックした箇所を判別し操作する方法

2014.04.08Cat:jQuery デザイナー

jQueryでクリックイベントで、アニメーションさせたり、操作したりすることは非常に多くありますが、
基本的に、その指定は、何かしらのボタンや要素を直でしていました。

例えば、

みたいな。

普段はこれで全然問題ないんですが、
この前、「この要素以外をクリックした時」にアクションを起こす必要があり、
普段のやり方ではダメだと思い、どうやってやるのかとちょっと調べた所、
いい方法がありました!

それが、event.targetというものです。

event.targetについて

僕自身そこまで理解が及んでいないのですが、

これで、ページ内のクリックした箇所の文字色を変更できます。

$(event.target)でクリックした箇所のオブジェクト要素を取得出来るようなので、
そこから起こしたいアクションを設定するといいみたいですね。

例えば、「クリックした箇所がulの中にあるコンテンツだったら」の場合、

こんな方法でやってみましたが、
他にいい方法があれば教えて頂きたいです!

上記のものを試しに、デモにしてみたので、
もしよかったらそちらもご覧下さい。

DEMO

デモサイトでは、灰色の正方形を押した場合、文字色が変わらないように設定しています。

デモのスクリプトは以下になります。

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ