Javascript Click event not firing when clicking on an element's padding

Question

Has anyone ever experienced a similar thing? When I click on the middle area of an li element, the click event fires, but when clicking on the padded area towards its edge the event doesn't fire.

I'm binding to click on the element.

Super stumped.

Spellbound

are you sure it's not margin you are talking about? – Pteridology

Chrome doesn't do anything weird: jsfiddle.net/G8uRH. – Languishing

Which browser(s)? Might be by design – Vat

@IanStormTaylor can you reproduce it in jsFiddle ? – Vituperate

Post your code or a jsFiddle. – Famagusta

I'm having the same issue, with the same HTML element (li), in Google Chrome 22. Is this a thing? – Penicillin

Answer 1

This is no solution, just a workaround, but wrap the whole content of an li in a wrapper div. Apply your padding to the div and not the li. This solved my issue, but this still seems like a very weird bug to me.

Penicillin

Answer 2

I also saw this happening, but only on iOS. Wrapping with a div didn't work either. After some research I discovered that the YUI delegate listener was not firing on that node's padding (though it did everywhere else on the node). Ultimately, I fixed it by removing that node from the delegate listener entirely and adding a traditional click event listener for just that node. After that, it worked fine!

Not sure if this will help your situation or not.

Entophyte

Answer 3

Just had this problem in Chrome, fixed it by adding position: relative; to the element.

Haeckel