Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
25
Help us understand the problem. What is going on with this article?
@ituki_b

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

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

25
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ituki_b
Contribution2000目指し中。 何かを理解/ジェネレーションするための自分用ツールを作るのが大好きです。 例→https://qiita.com/ituki_b/items/62a752389385de7ba4a2

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
25
Help us understand the problem. What is going on with this article?