Question

我有一个div，其中包含大量文本。我的问题是，是否可以检测到div边框上的点击？

我想要完成的是如果用户点击底部边框（使用CSS设置为4px宽），则div会一直滚动到底部。如果不添加更多标记，这是否可行？

Answer 1

你可以试试这个：

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

Demo.

.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 来获取坐标相对于元素。

Updated demo

Answer 2

我从未尝试过，但我不明白为什么它不应该工作：

计算元素的高度。
计算底部边框
计算元素本身内部的偏移量，如此处

jQuery get mouse position within an element

现在，您可以使用一些数学检查鼠标位置是否在底部边框内我不确定盒子大小是如何适应这种情况的，但这就是我如何开始的。

Answer 3

您的元素周围有一个包装器，并将填充设置为您想要检测的内容。

<强>的jQuery

＆＃13;

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

＆＃13;

#border {
  padding: 4px;
  background: blue;
  box-sizing: border-box;
  cursor: pointer;
}

.box{
  height: 100px;
  width: 100%;
  background: white;
  cursor: default;
}

＆＃13;

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

＆＃13;

Vanilla JS

＆＃13;

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

＆＃13;

#border {
  padding: 4px;
  background: blue;
  box-sizing: border-box;
  cursor: pointer;
}

.box{
  height: 100px;
  width: 100%;
  background: white;
  cursor: default;
}

＆＃13;

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

＆＃13;

jQuery单击div的边框

3 个答案:

Demo.

Updated demo