要素のクリックイベントで一部だけ別の動作をさせたいとき

覚え書きがどこに行ったかわからなくなったのでメモ。

##2014.02.20変更しました

• クラス名での指定をattrからhasClassに変更。
• idなど属性を使いたいときを追加。
• 要素名を使いたいときを追加。

##2014.02.21追加しました

• 色々方法があるけど、覚えんのめんどいなら.is(要素)でおk

#クラス名で

<p><span class="icon">ここは別の動作をさせる</span>ここは普通の動作をさせる</p>

$("p").click(function(e){
	if($(e.target).hasClass("icon")) {
		//.iconだけ別の動作
		//attr("class")だと複数のクラスのときに動作しないので変更。
	} else {
		//普通の動作
	}
});

#属性で

<p><span id="icon">ここは別の動作をさせる</span>ここは普通の動作をさせる</p>

$("p").click(function(e){
	if($(e.target).attr("id") == "icon") {
		//#iconだけ別の動作
	} else {
		//普通の動作
	}
});

#要素名で

<p><span>ここは別の動作をさせる</span>ここは普通の動作をさせる</p>

$("p").click(function(e){
	if($(e.target).get(0).tagName == "span") {
		//spanだけ別の動作
	} else {
		//普通の動作
	}
});

#色々方法があるけど、覚えんのめんどい
.is(要素)でおk

$("p").click(function(e){
	if($(e.target).is(要素)) {
		//要素（クラスでも属性でも、要素名でも）だけ別の動作
	} else {
		//普通の動作
	}
});

デモ：http://jsdo.it/Ituki/c7k9