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

  • 22
    Like
  • 10
    Comment
More than 1 year has 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