首页 > 代码库 > 当relative遇上z-index，半透明度不阻断事件捕获

当relative遇上z-index，半透明度不阻断事件捕获

2024-08-20 21:20:13   224人阅读

今天在做页面的时候，遇到一个li点点击事件无法触发的问题，在一步步console，发现添加事件的代码正确运行，切打印添加事件的对象没有错之后，

我就检查是否有透明的元素遮住了它，发现也并没有啊。于是我给li加上cursor: pointer; 惊悚地发现鼠标移上去的确不变手。然后我又惊悚地发现，我在li的样式中有一个z-index:-1; 于是我把z-index去掉，li鼠标在li上顺利变成了一只手。后面我发现，原来真正的原因是还有哟个position：relative；

当把li的position设为relative的时候，li已经脱离的文档流了，此时ul只是在文档结构中是li的父元素，而li在流中并不认ul作为父元素，就相当于li是在ul的外面定义的，所以li和ul比较层叠上下文的时候，就不存在父子关系（遵循后来居上和z-index的原则）。所以，z-index:-1;加上position:relative;会被父类覆盖，当然就加不了事件，之前我还一直天真以为relative的元素，还会认文档结构的父元素当爸爸，没想到relative元素也是暴脾气啊。以下是测试

ul{
        /*background-color: aqua;*/
        /*opacity: 0.6;*/
        /*float: left;*/
        /*position: relative;*/
    }
    ul>li{
       display: inline-block;
        width: 100px;
        height: 100px;
        z-index: -1;
        margin: 10px 10px;
        background-color: #1977a1;
        position: relative;
　　　　　cursor: pointer;
    }
 
 

效果如下：

技术分享

看起来似乎没有什么问题，但是这个时候，li的hover：pointer在鼠标移上去的时候，并没有效果，点击事件也没效果。把relative或z-index:-1;中任何一个去掉，li的事件和hover（变手）都有效。

本来事情到这里就该结束了，可我又发现一个很神奇的事情，当我设置ul的透明度不为1的时候，鼠标又可以投过ul，触发li的hover和事件，代码如下

<style>
    ul{
        background-color: aqua;
        opacity: 0.9;
        /*float: left;*/
        /*position: relative;*/
    }
    ul>li{
       display: inline-block;
        width: 100px;
        height: 100px;
        z-index: -1;
        margin: 10px 10px;
        background-color: #1977a1;
        position: relative;
        cursor: pointer;
    }




</style>
<script>

    $(function(){

        $("li").on("click",function(){

            alert("你点击了li哦");
        });

    });

</script>

点击的时候有触发事件：

技术分享

为什么会这样呢，难道透明度不为1的元素，对鼠标事件也是透明的么。我不太认同这个看法，于是我又用了一个跟ul和li没有半毛钱关系的div来遮住他们，并且设置透明度为0.5，看看他们的是否能穿透鼠标事件：代码

<head>
    <meta charset="utf-8">
    <title>ces</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
<body>

<style>
    ul{
        background-color: aqua;
        opacity: 0.9;
        /*float: left;*/
        /*position: relative;*/
    }
    ul>li{
       display: inline-block;
        width: 100px;
        height: 100px;
        z-index: -1;
        margin: 10px 10px;
        background-color: #1977a1;
        position: relative;
        cursor: pointer;
    }
    div{
        background-color: antiquewhite;
        opacity: 0.5;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 200px;
        width: 100%;

    }



</style>
<script>

    $(function(){

        $("li").on("click",function(){

            alert("你点击了li哦");
        });

    });

</script>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>

    </ul>
    <div></div>

</body>

效果如下，无论，你怎么点击，都触发不了事件：

技术分享

所以，我断定，透明度不唯一的时候，可以正确地捕获事件，但这个不是穿透，只是可以捕获到子类，所以能触发事件。而透明度为1的时候，捕获不到对象。因为hover和事件的触发关系都是在文档结构的位置决定的，而不是在流中的位置（或者说页面中的位置）决定的。

而元素，只要没有关系的元素，覆盖住另一个元素，就会阻断被覆盖元素的事件，就算覆盖的元素透明度为0（经过测试）。

当relative遇上z-index，半透明度不阻断事件捕获


联系
我们