Detecting click event on padding only

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

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.

Answer 2

I think this is what ThiefMaster intended to describe. In this scenario, a click on the content will do nothing but a click on the div with lots of padding will yield an action.

Basic markup:

<div id="divWithPadding" style="padding:30px;">
   <div>Content content content</div>
</div>

then

click listener for content div that prevents bubbling to divWithPadding:

$("#divWithPadding > div").click(function(e){
   e.stopPropagation(); 
});

click listener for divWithPadding that does something:

$("#divWithPadding").click(function(){
    //do something
});

Answer 3

I needed this as well, but also wanted a "real" solution. The accepted answer does really not target the question "Detecting click event on padding only" but suggests an intrusive change to the markup.

A "padding click" can be detected simply by retrieving the elements padding settings, computed width and height and compare those values to the mouse click offsets :

function isPaddingClick(element, e) {
  var style = window.getComputedStyle(element, null);
  var pTop = parseInt( style.getPropertyValue('padding-top') );
  var pRight = parseFloat( style.getPropertyValue('padding-right') );
  var pLeft = parseFloat( style.getPropertyValue('padding-left') );  
  var pBottom = parseFloat( style.getPropertyValue('padding-bottom') );
  var width = element.offsetWidth;
  var height = element.offsetHeight;
  var x = parseFloat( e.offsetX );
  var y = parseFloat( e.offsetY );  

  return !(( x > pLeft && x < width - pRight) &&
           ( y > pTop && y < height - pBottom))
}

demo here -> http://jsfiddle.net/er5w47yf/

jQuery :

$('#element').on('click', function(e) {
  if (isPaddingClick(this, e)) {
    console.log('click on padding')
  } else {
    console.log('click on element') 
  }
})

native :

document.getElementById('element').addEventListener('click', function(e) {
  if (isPaddingClick(this, e)) {
    console.log('click on padding')
  } else {
    console.log('click on element') 
  }
}, false)

For convenience, this can be turned into a jQuery pseudo event handler :

(function($) {
  var isPaddingClick = function(element, e) {
    var style = window.getComputedStyle(element, null);
    var pTop = parseInt( style.getPropertyValue('padding-top') );
    var pRight = parseFloat( style.getPropertyValue('padding-right') );
    var pLeft = parseFloat( style.getPropertyValue('padding-left') );  
    var pBottom = parseFloat( style.getPropertyValue('padding-bottom') );
    var width = element.offsetWidth;
    var height = element.offsetHeight;
    var x = parseFloat( e.offsetX );
    var y = parseFloat( e.offsetY );  
    return !(( x > pLeft && x < width - pRight) &&
             ( y > pTop && y < height - pBottom))
  }
  $.fn.paddingClick = function(fn) {
    this.on('click', function(e) {
      if (isPaddingClick(this, e)) {
        fn()
      }
    })   
    return this
  }
}(jQuery));

Now paddingClick works "natively" :

$('#element').paddingClick(function() {
  console.log('padding click')
})

demo -> http://jsfiddle.net/df1ck59r/