当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的原则）修改于2016-11-18---是在offset层上不存在父子关系，具体什么是offset上的父子关系，......且看下文....。所以，z-index:-1;加上position:relative;会被父类覆盖，当然就加不了事件，之前我还一直天真以为relative的元素，还会认文档结构的父元素当爸爸（offsetparent），没想到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（经过测试）。

转载于:https://www.cnblogs.com/thonus/p/6062202.html

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

当python遇上echarts （三）绘制3D图表
当python遇上echarts (二)绘制基本图表文章目录前言 3D图形配置项及方法 Grid3DOpts:三维笛卡尔坐标系配置项 Axis3DOpts:三维坐标轴配置项 add(): 共有的方 ...
当可解释人工智能遇上知识图谱
来源:知乎-机器学习小谈地址:https://zhuanlan.zhihu.com/p/386458680本文约6100字,建议阅读10分钟可解释人工智能遇上知识图谱. 在科学研究中,从方法论上来讲 ...
推荐系统遇上深度学习，9篇阿里推荐论文汇总！
作者 | 石晓文转载自小小挖掘机(ID: wAIsjwj) 业界常用的推荐系统主要分为两个阶段,召回阶段和精排阶段,当然有时候在最后还会接一些打散或者探索的规则,这点咱们就不考虑了. 前面九篇文章中 ...
[当人工智能遇上安全] 6.基于机器学习的入侵检测和攻击识别——以KDD CUP99数据集为例
您或许知道,作者后续分享网络安全的文章会越来越少.但如果您想学习人工智能和安全结合的应用,您就有福利了,作者将重新打造一个<当人工智能遇上安全>系列博客,详细介绍人工智能与安全相关的论文. ...
[当人工智能遇上安全] 1.人工智能真的安全吗？浙大团队外滩大会分享AI对抗样本技术
您或许知道,作者后续分享网络安全的文章会越来越少.但如果您想学习人工智能和安全结合的应用,您就有福利了,作者将重新打造一个<当人工智能遇上安全>系列博客,详细介绍人工智能与安全相关的论文. ...
腾讯技术直播间 | 当感性遇上理性，当魔术遇上数学
你心中的鹅厂程序员都是什么亚子? 996?007? 凭实力单身,从不关机? 身怀绝技的程序员有多野,你根本想不到. 今晚7点半,一位有着"数学魔术师"之称的鹅厂算法工程师空降直播间 ...
电脑销售渠道_双十一遇上英雄联盟S10，苏宁游戏装备销售增长258%
原标题:双十一遇上英雄联盟S10,苏宁游戏装备销售增长258% 11月1日,苏宁易购双十一迎来开门红,全渠道.全品类强势爆发.其中,苏宁3C再次领跑行业,访客数同比增长294%,买家数同比增长132% ...
当async/await遇上forEach
当async/await遇上forEach 当async/await遇到forEach会有什么反应呢? 这篇文章为你揭晓. 当async/await遇上forEach 前情提要这是在做格式化wang ...
开源php todo,TODO：当PHP遇上IIS
TODO:当PHP遇上IIS IIS调用PHP是使用CGI的功能,所以IIS一定要开启CGI的功能.默认为将 PHP 编译为 C CGI 程序.这将建立一个命令行解释器,可用于 CGI 处理或非 we ...

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

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

最新文章

热门文章