jQuery点击div边框

Question

我有一个带有大量文本的可滚动div。我的问题是，是否可以检测到对div边框的点击？

我想要实现的是，如果用户点击底部边框（使用CSS样式化为4px宽），则div会滚动到底部。这是否可能而不添加更多标记？

- Andrew

---

提示：您可以通过检查与该div元素相关的e.pageX来实现。 - Rajaprabhu Aravindasamy

Answer 1

您可以尝试这样做：

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

演示.

.outerHeight()只返回内容的高度（包括边框）。e.offsetY返回相对于元素点击的Y坐标。注意outerHeight，如果传递一个布尔值true参数，它将在计算值中包括margin，默认值为false，因此它只返回content height + padding + border。

更新：看起来FireFox有自己的行为方式。您可以看到，当点击、按住鼠标在一个元素上时，知道相对于元素的点击点的坐标非常自然和方便。但是，看起来我们没有方便的方法在所谓的FireFox中获取那些坐标，因为e.offsetX和e.offsetY根本不起作用（没有值）。相反，您必须使用pageX和pageY分别减去.offset().left和.offset().top，以获取相对于元素的坐标。

更新的演示

- King King

---

太好了！你能解释一下 e.offsetY 是什么吗？ - Andrew

@Andrew，我在我的答案中已经说过了，它返回所点击点的Y坐标。要获取X坐标，您可以使用offsetX。 - King King

哦，我应该把整个东西都读完的。抱歉，我太兴奋了。 - Andrew

完成！（抱歉，我对这个网站还有点新。）谢谢！ - Andrew

谢谢更新！您的更新版本在IE9中也可以运行（第一个版本不能）。真是个好答案！ - Andrew

Answer 2

你需要在元素周围设置一个包装器，并将填充设置为你想要检测的任何值。

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>

纯Javascript

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>

- Chris Happy

---

我并不认为这会避免许多代码行，但我确实认为用这种方式可能更简单。在问题中，我最初说过"没有更多的标记"，但事后想想，我不知道我为什么那么反对额外的标记。如果我将来需要实现此功能，我可能会使用这个解决方案。 - Andrew

Answer 3

我从未尝试过，但我不认为它不起作用：

1. 计算元素的高度。

2. 计算底部边框。

3. 计算元素内部的偏移量，就像这里一样

   jQuery get mouse position within an element

现在，您可以使用一些数学方法检查鼠标位置是否在底部边框内。
我不确定box-sizing如何适用于此，但这是我开始的方式。

- Patrick