当我们需要在网页中实现一些交互效果时，通常需要判断用户的鼠标是否悬停在某个元素上。虽然可以通过设置 onmouseover 和 onmouseout 事件来实现，但是这种方法可能会影响网页的性能，并且代码也比较繁琐。本文将介绍一种纯 JavaScript 的方法来判断鼠标是否悬停在元素上，无需设置 onmouseover 和 onmouseout 事件。
原理
要判断鼠标是否悬停在元素上，主要有两种方法：
- 监听鼠标移动事件 mousemove，检查鼠标位置是否在元素范围内；
- 监听鼠标进入和离开事件 mouseenter 和 mouseleave，判断当前状态是否为悬停。
第一种方法由于需要监听每次鼠标移动事件，可能会影响网页的性能；而第二种方法则需要在元素上设置 mouseenter 和 mouseleave 事件，比较繁琐。本文将介绍第一种方法，即监听鼠标移动事件。
实现方法
我们可以通过监听 document 对象上的鼠标移动事件 mousemove，获取当前鼠标的坐标，然后判断该坐标是否在目标元素的范围内。具体实现方法如下：
-- -------------------- ---- -------
-------- -------------------- -
----- - ----- ---- ------ ------ - - --------------------------------
----- - -------- ------- - - ------
------ -
------- -- ---- --
------- -- ---- - ----- --
------- -- --- --
------- -- --- - ------
--
-
-------------------------------------- ------- -- -
----- ------- - ----------------------------------
-- ---------------------- -
--------------------------
- ---- -
----------------------------
-
---代码中的 isMouseOver 函数用于判断鼠标是否悬停在目标元素上。首先使用 getBoundingClientRect 方法获取元素的位置和大小信息，然后获取当前鼠标坐标，最后判断鼠标坐标是否在元素范围内。如果是，则表示鼠标悬停在目标元素上。
示例
下面是一个完整的示例，演示如何使用纯 JavaScript 判断鼠标是否悬停在元素上。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------------------------
-------
------
---- ----------- ------------- ------ ------- ------ ----------------- -------------
--------
-------- -------------------- -
----- - ----- ---- ------ ------ - - --------------------------------
----- - -------- ------- - - ------
------ -
------- -- ---- --
------- -- ---- - ----- --
------- -- --- --
------- -- --- - ------
--
-
-------------------------------------- ------- -- -
----- ------- - ----------------------------------
-- ---------------------- -
--------------------------
- ---- -
----------------------------
-
---
---------
-------
-------上述代码中，我们创建了一个宽高为 100px 的红色 div 元素，并使用 isMouseOver 函数来检测鼠标是否悬停在该元素上。当鼠标悬停在元素上时，控制台将输出 "鼠标悬停在目标元素上"。
总结
本文
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30026