javaScript tips —— z-index 对事件机制的影响
demo
// DOM结构
class App extends React.Component {
componentDidMount() {
const div1 = document.getElementById('div1');
const div2 = document.getElementById('div2');
const div3 = document.getElementById('div3'); // 捕获阶段处理
div1.addEventListener('click', () => {console.log('div1 capturing');}, true);
div2.addEventListener('click', () => {console.log('div2 capturing');}, true);
div3.addEventListener('click', () => {console.log('div3 capturing');}, true); // 冒泡阶段处理
div1.addEventListener('click', () => {console.log('div1 bubbling');}, false);
div2.addEventListener('click', () => {console.log('div2 bubbling');}, false);
div3.addEventListener('click', () => {console.log('div3 bubbling');}, false);
} render() {
return (
<div id="div1" className="div1" >
<div id="div2" className="div2" >
<div id="div3" className="div3">
</div>
</div>
</div>
);
}
} ReactDOM.render(<App />, mountNode);
// css 代码 .div1 {
display: flex;
width: 500px;
height: 500px;
border: 1px solid red;
background: red;
} .div2 {
display: flex;
width: 400px;
height: 400px;
background: green;
} .div3 {
width: 200px;
height: 200px;
background: blue;
// z-index: -1;
}
1. div3 没有 z-index: -1 点击蓝色块(div3)
2. div3 没有 z-index: -1 点击蓝色块(div3)
结论:
1. z-index没有影响DOM结构
2. z-index形成了层叠上下文,导致触发事件的元素不一样,上文的demo来说: div3加上z-index: -1后, div2位于他的上方,此时,即使点击div3所在的位置,仍然触发的是div2,所以,根据事件先捕获后冒泡的的机制: div1 -> div2 -> div2 -> div1,因为事件机制并不会往触发事件的元素的后代继续传播
3. z-index 会影响触发事件的元素,并不会影响事件机制的本身。
相关姿势:
z-index:
- 背景和边框 —— 形成层叠上下文的元素的背景和边框。 层叠上下文中的最低等级。
- 负z-index值 —— 层叠上下文内有着负z-index值的子元素。
- 块级盒 —— 文档流中非行内非定位子元素。
- 浮动盒 —— 非定位浮动元素。
- 行内盒 —— 文档流中行内级别非定位子元素。
- z-index: 0 —— 定位元素。 这些元素形成了新的层叠上下文。
- 正z-index值 —— 定位元素。 层叠上下文中的最高等级。
flex与z-index的关系
《z-index和auto margins在flex布局中是如何工作的》
javaScript tips —— z-index 对事件机制的影响的更多相关文章
- 【探讨】javascript事件机制底层实现原理
前言 又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把 我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...
- JavaScript事件机制——细思极恐
JavaScript事件机制,也有让人深思的东西.在一开始未深入了解,我头脑里有几个问题发出: 1. 自下而上(冒泡)事件怎么写,自上而下(捕获)又是怎么写? 2. 捕获型和冒泡型同时设置,谁生效? ...
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- [解惑]JavaScript事件机制
群里童鞋问到关于事件传播的一个问题:“事件捕获的时候,阻止冒泡,事件到达目标之后,还会冒泡吗?”. 初学 JS 的童鞋经常会有诸多疑问,我在很多 QQ 群也混了好几年了,耳濡目染也也收获了不少,以后会 ...
- JavaScript 详说事件机制之冒泡、捕获、传播、委托
DOM事件流(event flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会 ...
- javascript 中的事件机制
1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...
- Javascript事件机制兼容性解决方案
本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...
- 【初窥javascript奥秘之事件机制】论“点透”与“鬼点击”
前言 最近好好的研究了一番移动设备的点击响应速度,期间不断的被自己坑,最后搞得焦头烂额,就是现在可能还有一些问题,但是过程中感觉自己成长不少, 最后居然感觉对javascript事件机制有了更好的认识 ...
- 重温javascript事件机制
以前用过一段时间的jquery感觉太方便,太强大了,各种动画效果,dom事件.创建节点.遍历.控件及UI库,应有尽有:开发文档也很多,网上讨论的问题更是甚多,种种迹象表明jquery是一个出色的jav ...
随机推荐
- jQuery异步加载数据并添加事件示例
当时项目是通过树形栏进行权限控制的,管理员可以对从数据库去的数据动态生成树形栏进行增删改查操作,可是用$(".XX").click();方法是不行的. 1.之前用的是jq1.4.3 ...
- 用tophat和cufflinks分析RNAseq数据[转载]
转自:http://blog.sciencenet.cn/home.php?mod=space&uid=635619&do=blog&id=884213 //今天看到一篇非常好 ...
- 我的第一次NGS分析操作
部分参考自:生物信息学100个基础问题 —— 番外2: 用Anaconda快速搭建生物信息学分析平台 - 孟浩巍的文章 - 知乎 https://zhuanlan.zhihu.com/p/357114 ...
- php处理restful请求的路由(转载 http://www.jb51.net/article/47333.htm)
<?php class Router { // 路由表 private $routers = array( array("nam ...
- mysql外键约束无法删除数据的情况解决办法
先删除子表的数据,然后再删除主表的数据.
- vue下载文件
import fileDownload from 'js-file-download' let params = { ", ", "filename":&quo ...
- 搭建Firekylin博客
搭建步骤 1).安装 Node.js curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash - yum - ...
- live555笔记_hi3516A
1.简介 是一个为流媒体提供解决方案的跨平台的C++开源项目,它实现了对标准流媒体传输是一个为流媒体提供解决方案的跨平台的C++开源项目,它实现了对标准流媒体传输协议如RTP/RTCP.RTSP.SI ...
- 编写和运行简单的"Hello World"操作系统内核
通常编写一个操作系统内核是一项浩大的工程.但我今天的目标是制作一个简单的内核,用比较方便的方法在虚拟机上验证它能够被grub装载和运行,并且可通过gdb进行调试,为接下去的工作创造一个基础环境. 首先 ...
- Thinkphp5.0实战开发一------命名空间详解
序言 ThinkPHP是一个快速.兼容而且简单的轻量级国产PHP开发框架,使用ThinkPHP框架可以极大简化我们的开发过程,节省时间.这个专题我将记录自己学习使用ThinkPHP5.0的进行实战开发 ...