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..., Sep 14 '11 at 14:47
does this thread: http://stackoverflow.com/questions/6635659/jquery-bind-click-anything-but-element is about the same issue as yours? — JMax, Sep 14 '11 at 14:50
Six months later and now I can create my own tags - not sure I will, though =] — Grim..., Feb 15 '12 at 11:09

score 9 · Accepted Answer · answered Sep 14 '11 at 14:50

9

You can do this:

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

answered Sep 14 '11 at 14:50

jmar777

38,796
11
66
64

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. – jmar777 Sep 14 '11 at 14:54
you can also just use `$(e.target).is(this)` to avoid referencing the selector twice, might make maintenance easier in the future – Brian Leishman Nov 19 '19 at 21:54

score 7 · Answer 2 · answered Sep 14 '11 at 14:51

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 '11 at 14:51

Michael Mior

28,107
9
89
113

@jmar777's solution for the first option of checking if the target is the pink div may make more sense. – Michael Mior Sep 14 '11 at 14:52

score 1 · Answer 3 · answered Sep 14 '11 at 14:50

1

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

answered Sep 14 '11 at 14:50

Jorge Guberte

10,464
8
37
56

1

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. – jmar777 Sep 14 '11 at 14:52

score 0 · Answer 4 · answered Sep 14 '11 at 14:50

0

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

answered Sep 14 '11 at 14:50

Brandon

1,997
3
24
33

score 0 · Answer 5 · answered Sep 14 '11 at 14:53

0

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

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

answered Sep 14 '11 at 14:53

rlemon

17,518
14
92
123

jQuery: Click on *only* this element

5 Answers5

jQuery: Click on only this element