巧用 JS 与 CSS 实现：div 鼠标移动事件穿透至 frame 并保留点击响应

可以通过JavaScript结合CSS的`pointer-events`属性来实现将`div`的鼠标移动事件穿透给`frame`，同时保留`div`的点击事件。实现思路 - 利用`pointer-events`属性控制元素是否响应鼠标事件。当鼠标移动时，将`div`的`pointer-events`属性设置为`none`，这样鼠标移动事件就能穿透`div`到`frame`上；当鼠标按下时，将`div`的`pointer-events`属性设置为`auto`，让`div`可以响应点击事件。代码示例 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Event Penetration</title> <style> /* 设置div和frame的样式 */ #myDiv { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 0, 0, 0.3); } #myFrame { width: 100%; height: 100%; } </style> </head> <body>  <iframe id="myFrame" src="https://www.example.com"></iframe>  <div id="myDiv"></div> <script> // 获取div元素 const div = document.getElementById('myDiv'); // 鼠标移动事件处理函数 div.addEventListener('mousemove', function () { // 鼠标移动时，设置div不响应鼠标事件，让事件穿透到frame div.style.pointerEvents = 'none'; }); // 鼠标按下事件处理函数 div.addEventListener('mousedown', function () { // 鼠标按下时，设置div响应鼠标事件，处理点击事件 div.style.pointerEvents = 'auto'; }); // 鼠标松开事件处理函数 div.addEventListener('mouseup', function () { // 鼠标松开时，再次设置div不响应鼠标事件，让后续移动事件穿透 div.style.pointerEvents = 'none'; }); </script> </body> </html> ``` 代码解释 1. HTML部分：创建了一个`iframe`元素和一个`div`元素，`div`元素覆盖在`iframe`之上。 2. CSS部分：设置了`div`和`iframe`的样式，将`div`的颜色设置为半透明红色，方便观察。 3. JavaScript部分： - 为`div`元素添加了`mousemove`、`mousedown`和`mouseup`事件监听器。 - 在`mousemove`事件中，将`div`的`pointer-events`属性设置为`none`，使鼠标移动事件穿透到`frame`。 - 在`mousedown`事件中，将`div`的`pointer-events`属性设置为`auto`，让`div`可以响应点击事件。 - 在`mouseup`事件中，再次将`div`的`pointer-events`属性设置为`none`，以便后续的鼠标移动事件继续穿透。通过这种方式，就可以实现将`div`的鼠标移动事件穿透给`frame`，同时保留`div`的点击事件。 ######[AI问答 | 811点数解答 | 2025-10-27 10:24:12]

服务商

更多选项

快捷项

自定义