【jQuery】クリックイベントで一部だけ別の動作をさせる

  • 投稿日
  • 著者 ituki
  • カテゴリー Program
Pocket
LINEで送る

下記のようなHTMLがあるときに、spanだけ別の動作をさせたいときに使うjQueryの覚え書きです。
qiitaでいろいろ教えてもらいました。

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

クラス名で指定：$(e.target).hasClass(クラス名)を使う

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

属性で指定：$(e.target).attr(属性)を使う

複数クラスを指定する場合は、.hasClass(クラス名)を使う

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

要素名で指定：$(e.target).get(0).tagName==要素名を使う

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

いちいち覚えるのが大変なときは、$(e.target).is(要素)を使う

$("p").click(function(e){
    if($(e.target).is(要素)) {
        //クラスでも、
        //属性でも、
        //要素名でも使えるので便利！
    } else {
        //普通の動作
    }
});

jQuery