事件穿透 pointer-events

孩子你要相信光

于 2024-06-01 10:58:22 发布

阅读量273

点赞数 3

分类专栏： HTML CSS 文章标签： css html 前端

本文链接：https://blog.csdn.net/qq505751223/article/details/139370565

版权

CSS 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

HTML

8 篇文章 0 订阅

订阅专栏

pointer-events 是一个 CSS 属性，它用于控制元素如何响应鼠标、触摸等指针设备的事件。通过设置 pointer-events 属性，您可以控制元素是否成为事件的目标，或者是否允许事件“穿透”到其下方的元素。

当 pointer-events 设置为 none 时，元素将不会成为鼠标事件的目标，并且鼠标事件会“穿透”该元素并传递给其下方的元素。这在您希望某些元素不可点击但仍然允许用户与其下方的元素交互时非常有用。

以下是一个使用 pointer-events: none; 实现事件穿透的 CSS 代码示例：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>pointer-events 示例</title>  
<style>  
  .overlay {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */  
    pointer-events: none; /* 允许事件穿透 */  
  }  
    
  .button {  
    position: relative;  
    padding: 10px 20px;  
    color: white;  
    background-color: blue;  
    border: none;  
    cursor: pointer;  
  }  
</style>  
</head>  
<body>  
  
<button class="button">点击我</button>  
<div class="overlay"></div> <!-- 遮罩层，但允许点击下面的按钮 -->  
  
<script>  
  // 这里的脚本只是为了说明，实际情况下按钮点击事件处理可以在HTML或外部JS文件中定义  
  const button = document.querySelector('.button');  
  button.addEventListener('click', function() {  
    alert('按钮被点击了！');  
  });  
</script>  
  
</body>  
</html>

在上面的示例中，.overlay 类应用了一个半透明的黑色遮罩层，它覆盖了整个页面。然而，由于 pointer-events: none; 的设置，这个遮罩层不会阻止用户点击其下方的 .button 元素。因此，尽管 .overlay 覆盖了按钮，但用户仍然可以点击按钮并触发其点击事件。这就是 pointer-events 属性实现事件穿透的一个例子。