Question

I have an HTML element with some padding. I would like to detect for clicks on that element’s padding. That is, I don’t want the event to fire when the user clicks on the content, just the padding.

Answer 1

Create an inner element which has 100% height/width so it fills out the whole element. Then register a click event handler on this event and prevent bubbling of the event.

Here’s an example (using jQuery): http://jsfiddle.net/ThiefMaster/QPxAp/

---

The markup:

<div id="outer">
    <div id="inner"></div>
</div>

and the JS code:

$('#outer').click(function() {
    alert('click');
});

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

Since events bubble, the click event on the inner element hits this element first – stopping its propagation will prevent it from ever reaching the outer element, so its click event handler only triggers if the are that belongs to the element but is not covered by the inner element is clicked.