Javascript 检测元素的客户端区域内是否发生鼠标事件

在Javascript中，检测鼠标事件是否发生在元素的客户端区域内部或外部的正确方法是什么

我有一个带有边框的容器和一个用作控制组的滚动条。我希望在用户单击容器客户端区域内的任何位置时，而不是在单击scollbar时，以编程方式聚焦组中的活动元素。

下面是一个工作示例 下面是代码片段。希望这有帮助

    <button onclick="doSomething('param');" id="id_button">action</button>
    <button onclick="doSomething('param');" id="id_button1">action2</button>




function doSomething(param,e)
        {
         if (!e)  e = window.event;
        var source1 = e.target || e.srcElement;
            console.log(source1.id);
        alert(source1.id);
        if(window.event) // IE8 and earlier
            {
            //doSomething
            }
        else if(e.which) // IE9/Firefox/Chrome/Opera/Safari
            {
            //doSomething
            }

        }

下面是一个工作示例 下面是代码片段。希望这有帮助

    <button onclick="doSomething('param');" id="id_button">action</button>
    <button onclick="doSomething('param');" id="id_button1">action2</button>




function doSomething(param,e)
        {
         if (!e)  e = window.event;
        var source1 = e.target || e.srcElement;
            console.log(source1.id);
        alert(source1.id);
        if(window.event) // IE8 and earlier
            {
            //doSomething
            }
        else if(e.which) // IE9/Firefox/Chrome/Opera/Safari
            {
            //doSomething
            }

        }

---

我知道怎么做了。下面的代码可能只适用于支持getBoundingClientRect的较新浏览器

---

我知道怎么做了。下面的代码可能只适用于支持getBoundingClientRect的较新浏览器

实际上，您可以使用rect的其他属性，而不是使用clientWidth等。这使得代码更简单，更通用，也适用于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甚至可以用于转换的元素，如果您在移动设备上，也可以用于滚动和缩放。浏览器支持非常好的基本属性，请参见

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

实际上，您可以使用rect的其他属性，而不是使用clientWidth等。这使得代码更简单，更通用，也适用于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甚至可以用于转换的元素，如果您在移动设备上，也可以用于滚动和缩放。浏览器支持非常好的基本属性，请参见

您还可以添加一些余量以支持更大的抽头区域