我如何知道鼠标指针是否位于页面上的特定元素上？

Question

当然，借助JavaScript。

Answer 1

最简单的方法是处理元素的onmouseover和onmouseout事件：

element.onmouseover = function (e)
{
    e = e || window.event;
    alert("You moused over "+element.outerHTML);
}
element.onmouseout = function (e)
{
    e = e || window.event;
    alert("You moused out of "+element.outerHTML);
}

如果元素是在这些坐标处最顶层的元素，则也可以使用document.elementFromPoint(x, y) ：

var mouseX = 0, mouseY = 0;
document.documentElement.onmousemove = function (e)
{
    e = e || window.event;
    mouseX = e.clientX;
    mouseY = e.clientY;
}
function getElementUnderMouse()
{
    return document.elementFromPoint(mouseX, mouseY);
}

显然，如果您有某些元素阻止onmousemove事件的传播/冒泡， onmousemove鼠标悬停在这些元素上时，鼠标位置可能不正确。

Answer 2

触发onMouseover，onMouseout事件。

Answer 3

在下面的示例中，如果将鼠标悬停在div上，它将变为蓝色。

如果将onmouseover放置到完整的BODY上，则可以检查条件（ID，className，tagName等）是否要对要覆盖的元素执行操作。

<html>
<head>
    <title>so</title>
</head>
<body>
    <div>div 1</div>
    <div>div 2</div>
    <div>div 3</div>
    <script>
        document.body.onmouseover = function(ev){
            var elm = ev.target || ev.srcElement;
            if(elm.tagName === 'DIV'){
                elm.style.backgroundColor = "#DEF";
            }
        };
    </script>
</body>
</html>

我如何知道鼠标指针是否位于页面上的特定元素上？

问题描述

3 个解决方案

解决方案1
3 2010-02-07 13:09:50

解决方案2
2 2010-02-07 12:25:02

解决方案3
1 2010-02-07 21:09:02

我如何知道鼠标指针是否位于页面上的特定元素上？

问题描述

3 个解决方案

解决方案1 3 2010-02-07 13:09:50

解决方案2 2 2010-02-07 12:25:02

解决方案3 1 2010-02-07 21:09:02

解决方案1
3 2010-02-07 13:09:50

解决方案2
2 2010-02-07 12:25:02

解决方案3
1 2010-02-07 21:09:02