下記のような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 { //普通の動作 } });