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

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

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