jQuery

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

More than 5 years have passed since last update.

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


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