javascript - 检测鼠标事件是否发生在元素的客户区内

Question

在 Javascript 中检测鼠标事件是发生在元素的客户区内部还是外部的正确方法是什么？

我有一个带有边框和滚动条的容器作为控制组。我想在用户单击容器客户区内的任何地方时以编程方式将事件元素集中在组中，而不是在他们单击 scollbar 时。

Answer 1

实际上，除了使用 clientWidth 等，您还可以使用 rect 的其他属性。这使代码简单且更通用(也应该适用于 SVG 元素):

/**
 * Check whether the event occurred roughly inside (or above) the element.
 * 
 * @param {MouseEvent} event Event to check.
 * @param {Node} element Element to check.
 */
function isEventInElement(event, element)   {
    var rect = element.getBoundingClientRect();
    var x = event.clientX;
    if (x < rect.left || x >= rect.right) return false;
    var y = event.clientY;
    if (y < rect.top || y >= rect.bottom) return false;
    return true;
}

请注意，getBoundingClientRect 甚至适用于转换后的元素，也适用于滚动(如果您在移动设备上，则适用于缩放)。浏览器对基本属性的支持非常好(请参阅 MDN)。

您还可以添加一些边距以支持更大的点击区域。