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

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

今天在做页面的时候,遇到一个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,半透明度不阻断事件捕获