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）。

您还可以添加一些边距来支持更大的分接区域。

Answer 2

这是一个有效的例子 http://jsfiddle.net/kYC9u/ 以下是代码段。希望这有帮助

    <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
            }

        }

Answer 3

我想出了如何做到这一点。以下代码可能仅适用于支持getBoundingClientRect的新浏览器。

function isMouseEventInClientArea(event)
{
    var element = event.currentTarget;
    var rect = element.getBoundingClientRect();
    var minX = rect.left + element.clientLeft;
    var x = event.clientX;
    if (x < minX || x >= minX + element.clientWidth) return false;
    var minY = rect.top + element.clientTop;
    var y = event.clientY;
    if (y < minY || y >= minY + element.clientHeight) return false;
    return true;
}

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

3 个答案: