在前端开发中，有时需要判断一个元素是否和其他元素重叠，比如在拖拽物体时防止覆盖到其他元素。本文将介绍使用 JavaScript 和 CSS 判断元素是否重叠的方法。
方法一：getBoundingClientRect
getBoundingClientRect() 是一个用于获取元素大小及相对视口的位置的 API，返回的是一个包含 top、 right、 bottom、 left、 width 和 height 属性的 DOMRect 对象。可以利用这些属性来计算两个元素是否重叠。
示例代码：
-- -------------------- ---- -------
-------- ------------------- --------- -
----- ----- - ---------------------------------
----- ----- - ---------------------------------
------ --
------------ - --------- --
--------- - ------------ --
----------- - ---------- --
---------- - -----------
--
-
----- --- - ------------------------------------
----- --- - ------------------------------------
-- --------------- ----- -
--------------------- -----------
-上面的代码定义了一个名为 isOverlap 的函数，接受两个参数，即待判断的两个元素。该函数内部首先使用 getBoundingClientRect() 获取两个元素的位置信息，并根据位置信息计算两个元素是否重叠。最后返回一个布尔值表示结果。
方法二：CSS 判断
CSS 中提供了一个 pointer-events 属性，它可以控制元素是否响应鼠标事件。如果将一个元素的 pointer-events 属性设置为 none，则该元素不会响应任何鼠标事件，包括移动、点击等，这时就可以通过判断鼠标事件是否触发来判断元素是否重叠。
示例代码：
-- -------------------- ---- -------
---- --------------------
---- --------------------
-------
--------- -
--------- ---------
---- ------
----- ------
------ ------
------- ------
--------------- -----
-
--------- -
--------- ---------
---- ------
----- ------
------ ------
------- ------
-
--------
--------
----- --- - ------------------------------------
----- --- - ------------------------------------
--------------------------------- ------- -- -
-- ------------- --- ---- -
--------------------- -----------
-
---
---------上面的代码中，定义了两个 <div> 元素，并使用 CSS 将其中一个元素的 pointer-events 属性设置为 none。然后在 JavaScript 中监听另一个元素的 mousemove 事件，当鼠标移动到该元素上时，判断是否触发了第一个元素的事件，如果是，则表示两个元素重叠。
总结
本文介绍了两种方法来判断元素是否重叠，通过使用 getBoundingClientRect() 获取元素位置信息和 CSS 的 pointer-events 属性来实现。这些方法都可以在实际开发中广泛应用，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27291