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

例えば、

みたいな。

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

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

event.targetについて

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

JavaScript

$(document).click(function(event){ var target = $(event.target); target.css("color","#ff6300"); });

1 2 3 4

$(document).click(function(event){ var target = $(event.target); target.css("color","#ff6300"); });

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

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

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

JavaScript

$(document).click(function(event){ var target = $(event.target); if(target.parents("ul").length){ alert("ulの中の要素です！"); } });

1 2 3 4 5 6 7

$(document).click(function(event){ var target = $(event.target); if(target.parents("ul").length){ alert("ulの中の要素です！"); } });

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

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

DEMO

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

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

JavaScript

$(function(){ $(document).click(function(event){ var target = $(event.target); target.not(".block").css("color","#ff6300"); if(target.parents("ul").length){ alert("ulの中の要素です！"); } }); });

1 2 3 4 5 6 7 8 9 10 11

$(function(){ $(document).click(function(event){ var target = $(event.target); target.not(".block").css("color","#ff6300"); if(target.parents("ul").length){ alert("ulの中の要素です！"); } }); });