jQuery click on border of a div

Question

I have a div that scrolls with a lot of text in it. My question is, is it possible to detect a click on the border of the div?

What I'd like to accomplish is if the user clicks on the bottom border (which is styled 4px wide with CSS), the div scrolls all the way to the bottom. Is this even possible without adding more markup?

Answer 1

You can try this:

$('div').click(function(e){
  if(e.offsetY >$(this).outerHeight() - 4){
    alert('clicked on the bottom border!');
  }
});

Demo.

The .outerHeight() just returns the height of the content (including border). The e.offsetY returns the clicked Y relative to the element. Note about the outerHeight, if passing a bool true argument, it will include margin in the calculated value, the default is false, so it just returns content height + padding + border.

UPDATE: Looks like FireFox has its own way of behavior. You can see that when clicking, holding mouse down on an element, it's very natural and convenient to know the coordinates of the clicked point relative to the element. But looks like we have no convenient way to get that coordinates in the so-called FireFox because the e.offsetX and e.offsetY simply don't work (have no value). Instead you have to use the pageX and pageY to subtract the .offset().left and .offset().top respectively to get the coordinates relative to the element.

Updated demo

Answer 2

I never tried it, But I don't see why it shouldn't work :

1. Calculate the height of the element.

2. calculate the bottom border

3. calculate the offset inside the element itself, like in here

   jQuery get mouse position within an element

Now you can check if the mouse position is inside the bottom border using some math.
I'm not sure how box-sizing fits into this, But that's how I would start around.

Answer 3

You have a wrapper around your element and set the padding to what ever you want to be detected.

jQuery

$("#border").click(function (e) {
  if(e.target !== e.currentTarget) return;
  console.log("border-clicked")
});

#border {
  padding: 4px;
  background: blue;
  box-sizing: border-box;
  cursor: pointer;
}

.box{
  height: 100px;
  width: 100%;
  background: white;
  cursor: default;
}

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

Vanilla JS

var border = document.getElementById("border");

border.onclick = function(e) {
  if(e.target !== e.currentTarget) return;
  console.log("border-clicked")
}

#border {
  padding: 4px;
  background: blue;
  box-sizing: border-box;
  cursor: pointer;
}

.box{
  height: 100px;
  width: 100%;
  background: white;
  cursor: default;
}

<div id="border">
<div class="box"></div>
</div>