jQuery: Click on only this element

Question

Super-technical drawing

In the highly-artistic drawing above, the green square is a child of the pink one. The pink one is wrapped around the green one by my function, so the green square could be anything - a hyperlink, an image, button, etc.

I want to capture a click on the pink div ONLY if it isn't a click on the green element too.

This could be done by flipping a Boolean using mouseenter on the green square, but that seems a messy way to do it to me.

Any clues?

IMPORTANT EDIT: I can't mess with the green square at all, so no adding anything to the click event.

I am most upset that SO wouldn't let me create the new tag 'exciting image' =[ — Grim...
– Grim..., Commented Sep 14, 2011 at 14:47
does this thread: stackoverflow.com/questions/6635659/… is about the same issue as yours? — JMax
– JMax, Commented Sep 14, 2011 at 14:50
Six months later and now I can create my own tags - not sure I will, though =] — Grim...
– Grim..., Commented Feb 15, 2012 at 11:09

jmar777 · Accepted Answer · 2011-09-14 14:50:48Z

9

You can do this:

$('.pink-box-selector').click(function(e) {
    if ($(e.target).is('.pink-box-selector')) {
        // do stuff here
    }
});

answered Sep 14, 2011 at 14:50

jmar777

39.8k11 gold badges68 silver badges66 bronze badges

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

2 Comments

jmar777 Over a year ago

Just as a side note, one of the advantages of this solution is that you don't have to modify the code based on what element you wrap (since you said that the wrapped element may vary). It's basically white-listing, vs. black-listing.

Brian Leishman Over a year ago

you can also just use $(e.target).is(this) to avoid referencing the selector twice, might make maintenance easier in the future

Michael Mior · Accepted Answer · 2011-09-14 14:51:11Z

7

Two options. You can first either check if the target is the green div.

$('#pinkdiv').click(function(e) {
  if ($(e.target).is('#greendiv')) return;
  // handle the event
});

Or you can write the click handler for the pink div normally and stop clicks on the green div from propagating.

$('#greendiv').click(function(e) {
  e.stopPropagation();
});

answered Sep 14, 2011 at 14:51

Michael Mior

28.9k10 gold badges95 silver badges118 bronze badges

1 Comment

Michael Mior Over a year ago

@jmar777's solution for the first option of checking if the target is the pink div may make more sense.

Jorge Guberte · Accepted Answer · 2011-09-14 14:50:09Z

1

Would $("#div_id :not('#excluded_element')).click(); help? http://api.jquery.com/not-selector/

answered Sep 14, 2011 at 14:50

Jorge Guberte

11.2k8 gold badges41 silver badges58 bronze badges

1 Comment

jmar777 Over a year ago

This selector would select nothing. It would look for something inside of #div_id that isn't the only element that's actually in there.

Brandon · Accepted Answer · 2011-09-14 14:50:20Z

0

Setup a separate click event listener for the "green" element and have it event.preventDefault()

answered Sep 14, 2011 at 14:50

Brandon

2,1454 gold badges25 silver badges33 bronze badges

Comments

rlemon · Accepted Answer · 2011-09-14 14:53:46Z

0

http://jsfiddle.net/rlemon/d8qVp/

$("#pink").click(function(){
    if(!$("#green").is(":hover")) {
        alert('here');   
    }
});

answered Sep 14, 2011 at 14:53

rlemon

17.7k14 gold badges95 silver badges126 bronze badges

Collectives™ on Stack Overflow

jQuery: Click on only this element

5 Answers 5

2 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related