jQuery点击div的边框 [英] jQuery click on border of a div

问题描述

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

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?

我想要完成的是如果用户点击底部边框它的样式是4px宽与CSS），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?

推荐答案

您可以尝试这样：

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

演示

.outerHeight（）只返回内容的高度边境）。 e.offsetY 返回相对于元素的点击Y。注意关于 outerHeight ，如果传递bool true 参数，它将包括 code>在计算值，默认是 false ，所以它只是返回 content height + padding + 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 ：看起来FireFox有自己的行为方式。您可以看到，点击时将鼠标放在某个元素上，可以很容易地知道点击点 相对于元素的坐标的坐标。但是看起来我们没有方便的方法在所谓的FireFox中获取坐标，因为 e.offsetX 和 e.offsetY 简单不工作（没有价值）。您必须使用 pageX 和 pageY 减去 .offset（）。left 分别获取元素相对于元素的坐标。 。

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.

这篇关于jQuery点击div的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！