27
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-02-19

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

##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

27
25
10

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
27
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?