JQuery: click * only * this item

Question

In the highly artistic drawing above, the green square is the baby pink. Pink is wrapped around green according to my function, so the green square can be anything - a hyperlink, image, button, etc.

I want to capture a click on the pink div ONLY if it is not a click on the green element either.

This can be done by transferring the logical value with the mouse center to the green square, but this seems like a messy way of doing it for me.

Any clues?

IMPORTANT CHANGE: I cannot communicate with the green square at all, so I am not adding anything to the click event.

Answer 1

You can do it:

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

Answer 2

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

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

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

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

Answer 3

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

Answer 4

Set up a separate event listener for the green element and let it event.preventDefault()

Answer 5

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

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