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.

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.

• javascript
• click
• dom-events

Share Improve this question Follow edited Jul 25, 2019 at 12:46 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Feb 22, 2012 at 15:51 Ian Storm TaylorIan Storm Taylor 8,7201212 gold badges5757 silver badges7575 bronze badges 6

• 3 are you sure it's not margin you are talking about? – jondavidjohn Commented Feb 22, 2012 at 15:52
• Chrome doesn't do anything weird: jsfiddle/G8uRH. – pimvdb Commented Feb 22, 2012 at 15:53
• Which browser(s)? Might be by design – Richard H Commented Feb 22, 2012 at 15:53
• 1 Post your code or a jsFiddle. – j08691 Commented Feb 22, 2012 at 15:54
• 1 I'm having the same issue, with the same HTML element (li), in Google Chrome 22. Is this a thing? – gnclmorais Commented Oct 19, 2012 at 16:59

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 1

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.

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.

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