Detecting Click Event on Padding Only

Detecting click event on padding only

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.

Triggering a 'click' event on the element ONLY without taking its padding into account

in your HTML wrap <li> contents in a <span>:

<ul>
  <li><span>First element</span></li>
  <li><span>Second element</span></li>
<ul>

in your CSS set the padding for <li>. for example:

li {
  padding: 20px;
}

And in your JS set click event for <span> (NOT <li>):

let firstElement = document.querySelector('li span');

firstElement.addEventListener('click', clickHandler);

How to include padding as part of a div that can be clicked to trigger event

If you were to wrap the div in any sort of container element and then attach the on-click / hover events to that container, then that would result in events being triggered when the user clicks anywhere on the div (including the padding.) This should extend to cursor styling as well

If you're looking to target the padding exclusively then check out this answer here: https://stackoverflow.com/a/7462847/6477119

Detecting clicks in margin space of li elements

using label wrapping inputs , it should work without jQuery.
http://codepen.io/anon/pen/Aviwf
increased margin and bg color for demo

input {margin:0 3em;}
label {display:inline-block;background:rgba(0,0,0,0.1)}

Only detect click event on pseudo-element

This is not possible; pseudo-elements are not part of the DOM at all so you can't bind any events directly to them, you can only bind to their parent elements.

If you must have a click handler on the red region only, you have to make a child element, like a span, place it right after the opening <p> tag, apply styles to p span instead of p:before, and bind to it.

Detect click inside/outside of element with single event handler

Using jQuery:

$(function() {
  $("body").click(function(e) {
    if (e.target.id == "myDiv" || $(e.target).parents("#myDiv").length) {
      alert("Inside div");
    } else {
      alert("Outside div");
    }
  });
})

#myDiv {
  background: #ff0000;
  width: 25vw;
  height: 25vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv"></div>

Click on span with padding

There is no need in spaces or anything, its working great without any changes, that was my bad!

jQuery click event target padding

Your problem is with this line:

$parents = $target.parents(".menu");

Change it to this:

$parents = $target.closest(".menu");

The div doesn't have a parent with the class .menu, so if you click that, it doesn't find anything. closest includes the selected element in the search.

http://jsfiddle.net/ecnGr/

Clicking on the padding of an input field sets the cursor at the beginning of the line, not at the end

Check the snippet, the code is bit long but manages to work in all scenarios.

Here added a function to check if the click is from padding area from here

Added another function to get the caret position, and combined both function to get get the desired result.

var carPos = 0;(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)) {       e.target.setSelectionRange(carPos, carPos);        fn()      }    })       return this  }}(jQuery));

$('input').paddingClick()$('input').bind('click keyup', function(event){  carPos = event.target.selectionStart;})

.as-console{ display:none!important}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input style="padding:25px;font-size:25px" value='hello' />

---

Related Topics