CSS属性pointer-events的使用方法

最新推荐文章于 2025-02-24 19:49:29 发布

气乃本

最新推荐文章于 2025-02-24 19:49:29 发布

阅读量518

点赞数 2

分类专栏： css&html技巧文章标签： css 前端

本文链接：https://blog.csdn.net/u013553807/article/details/142517820

版权

css&html技巧专栏收录该内容

9 篇文章

订阅专栏

介绍

pointer-events 属性用于设置元素是否对鼠标事件做出反应。 默认值为auto，就是元素对鼠标事件做出反应，可设置为pointer-events: none; 表示元素忽略鼠标事件。

用最简单的话来说，只要设置了pointer-events: none; 任何鼠标事件都将被无效化（例如：点击事件、鼠标移入移除、css的hover等）。

问题列举

如果有两个元素，一个元素覆盖到另一个元素上，如何做到点击上面的元素触发下面的元素？

上面这个问题，就是通过pointer-events来解决。当然也可以通过父子元素冒泡来实现。

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pointer-events使用</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    #a{
        width: 100%;
        height: 40px;
        position: absolute;
        top: 0;
        background-color: aqua;
        text-align: center;
        z-index: 2;

        pointer-events: none;  
    }
    #b{
        width: 100%;
        height: 40px;
        position: relative;
        background-color: red;
        z-index: 1;
    }
</style>
<body>
    <div id="a">aaa</div>
    <div id="b" onclick="cb()">bbb</div>
    <script>
        function cb(){
            console.log('点击了B')
        }
    </script>
</body>
</html>

点击事件可以穿越遮罩层#a，直接触发cb事件。