jquery select single tag class onclick

Question

seems a little trivial but am having a hard time solving it, i have a jquery function to select the class of a tag on click but the problem is that it selects every other tag underneath the tag clicked as well in structural order where as i only want the very first one

for example if i have

<div class="1">
  <div class="2">
      <div class="3">
          <p class="4">Hello World</p>
      </div>
  </div>
</div>

and i clicked on the (p) tag that says hello world i would get an alert saying 4 then 3 then 2 then 1 but like i said i only want the first one witch in this case is 4

here is my jquery code

$("*").dblclick(function(){
    if(!$(this).hasClass("") && !$(this).hasClass("main")){
        alert($(this).attr('class'));
    }
});

i know the problem is happening because technically i am clicking all of the tags so it continus to loop trough but i still need a way to break it after the first class is selected or better yet is there a way to select only the topmost object

Use event.stopPropagation() or return false; from event handler — Tushar
– Tushar, Commented Oct 16, 2015 at 17:05

Tushar · Accepted Answer · 2015-10-16 17:07:52Z

1

Just add return to the function like so:

$("*").dblclick(function(){
if(!$(this).hasClass("") && !$(this).hasClass("main")){
    alert($(this).attr('class'));
    return false;
}
});

edited Oct 16, 2015 at 17:07

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

answered Oct 16, 2015 at 17:04

Casey ScriptFu Pharr

1,6801 gold badge17 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tushar Over a year ago

Small Case return false;

user2692997 Over a year ago

dude thanks your a life saver such a tiny problem but its taken me the better part of a day

Casey ScriptFu Pharr Over a year ago

May I ask though why you are selecting all classes? Let me post a more efficient answer example, based on the given logic, unless htis was just for demo reasons.

Casey ScriptFu Pharr Over a year ago

It won't let me post an answer, but just select by the class main, the rest is not necessary

Casey ScriptFu Pharr Over a year ago

example: $("*").not(".main").dbclick(function(){alert($(this).class());});

|

Scott Schwalbe · Accepted Answer · 2015-10-16 17:05:56Z

1

I would pass in event to your click function, and after you've finished your logic, use event.stopPropagation(). This prevents the event from bubbling up to parent elements

$("*").dblclick(function(event){
    if(!$(this).hasClass("") && !$(this).hasClass("main")){
        alert($(this).attr('class'));
    }
    event.stopPropagation();
});

answered Oct 16, 2015 at 17:05

Scott Schwalbe

5402 silver badges4 bronze badges

2 Comments

Tushar Over a year ago

!$(this).hasClass("") not required

Casey ScriptFu Pharr Over a year ago

this is also a good solution. I will give this an answer point.

Emir Marques · Accepted Answer · 2015-10-16 17:10:50Z

0

Run this example and look your console.

$("body > div").dblclick(function(){
   console.log($(this).attr('class'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="1">
  <div class="2">
      <div class="3">
          <p class="4">Hello World</p>
      </div>
  </div>
</div>

answered Oct 16, 2015 at 17:10

Emir Marques

2,6772 gold badges18 silver badges22 bronze badges

Comments

Yuriy Yakym · Accepted Answer · 2015-10-16 17:32:29Z

0

You should read about event bubbling and event propagation.

Here is function which does what you want:

$("*").dblclick(function(e){
    if(!$(this).hasClass("") && !$(this).hasClass("main")){
        alert($(this).attr('class'));
        e.stopPropagation();
    }
});

And here is working example: https://jsfiddle.net/18sawk57/

Although it's not a good solution to attach event listening to all of the tags on the page. Much better solution is to add for example id or clickable class attribute for elements that should have event listening.

Here is another working example with better approach: https://jsfiddle.net/tr7aqask/

Here is another working example with bubbling disabled using jquery: https://jsfiddle.net/yc0481sm/

edited Oct 16, 2015 at 17:32

answered Oct 16, 2015 at 17:13

Yuriy Yakym

3,96621 silver badges33 bronze badges

Collectives™ on Stack Overflow

jquery select single tag class onclick

4 Answers 4

6 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related