CODEWITHSUNDEEP
jquerycssonclicklistener
Rick Donohoe
Rick Donohoe

Reputation: 7271

Avoiding click event on absolute positioned element below

I have 2 elements a parent element and its child, and both are absolutely positioned.

I have a click handler for each element, although when I click the child element the parent element behind it also catches the click.

How do I prevent the parent element from receiving the click event?

Upvotes: 6

Views: 5121

Answers (2)

Pitchinnate
Pitchinnate

Reputation: 7556

You can use JQuery and simple have a preventDefault or return false on the parent element:

$('#parent').click(function() {
    return false;
});

$('#child').click(function() {
    //do something
});

Upvotes: 0

Andy
Andy

Reputation: 14575

If you want a pure CSS solution, you could use pointer-events: none;. This will make sure your mouse ignores the parent element, for good, so be careful in your use of it.

Also note this is NOT SUPPORTED in IE or Opera. (Or at least, not on HTML elements, just SVG)

jQuery alternative is e.StopPropagation, more info can be found here

Upvotes: 6

Related Questions