JQuery click on border div

Question

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

What I would like to accomplish is if the user clicks on the bottom frame (which is 4 pixels wide with CSS), the div scrolls to the end. Is this possible without adding extra markup?

Answer 1

You can try the following:

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

Demo version

.outerHeight() ( ). e.offsetY Y . outerHeight, bool true, margin , false, content height + padding + border.

. , FireFox . , , , . , FireFox, e.offsetX e.offsetY ( ). pageX pageY .offset().left .offset().top , .

Answer 2

, , :

• .

• ,

  jQuery

, , .
, , .

Answer 3

You have a wrapper around your element and install the add-on for what you want to detect.

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>

Run codeHide result

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>

Run codeHide result