面试被问，一脸懵，被提示，还蒙，好丢脸的感觉。。。。赶紧百度了解

.noclick{

   pointer-events: none;  /* 上层加上这句样式可以实现点击穿透 */

}

就是说重叠在一起的两个元素，给上边元素加这个属性之后，再点击上边元素就可以触发下边元素的事件，即点击穿透事件。

目前不了解用到的场景，以后遇到再来补充。。

和朋友讨论后，朋友说可以用冒泡事件

冒泡的确可以，不过布局不太一样

冒泡的话需要给两个重叠的元素设置父元素，直接给父元素添加点击事件就可以

也是一种思路。

当时听到‘点击穿透’一下蒙了，根本没听过，哎，吃了心理素质不好的亏。。。

以后这种情况还是要和面试官确认场景，冷静下来，用自己熟悉的操作实现它

加油，奥利给

点击穿透事件-----CSS新属性的更多相关文章

  1. 利用css新属性appearance优化select下拉框

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. css新属性box-sizing应用

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Shape-in​​side css新属性 几何图形的实现

    https://www.w3cplus.com/css3/css-shapes-101.html

  4. pointer-events属性屏蔽鼠标事件（点击穿透上层元素）

    应用场景 我们在 HTML 开发时可能会遇到这样的情况:页面上有一些元素使用绝对定位布局,这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部.默认情况下,下方元素被遮挡的部分是不会响应鼠标事件的 ...

  5. 点击穿透问题（http://www.tuicool.com/articles/6NfaUnM）

    一.click与300ms延迟 移动浏览器提供一个特殊的功能:双击(double tap)放大 300ms的延迟就来自这里,用户碰触页面之后,需要等待一段时间来判断是不是双击(double tap)动 ...

  6. 【移动端】300ms延迟以及点透事件原因以及解决方案

    产生原因 移动端会有双击缩放的这个操作,因此浏览器在click之后要等待300ms,看用户有没有下一次点击,也就是这次操作是不是双击 说完移动端点击300ms延迟的问题,还不得不提一下移动端点击穿透的 ...

  7. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  8. hitTest:withEvent:方法(此方法可实现点击穿透、点击下层视图功能)

    此方法可实现点击穿透.点击下层视图功能 一. hitTest:withEvent:调用过程 iOS系统检测到手指触摸(Touch)操作时会将其放入当前活动Application的事件队列,UIAppl ...

  9. div+css的属性

    div+css的属性 gCascading Style Sheet 层叠式样式表 ==> 层叠样式表 Internal Style Sheet 内部样式表 External Style Shee ...

随机推荐

  1. idea修改module name后重启失效

    技术交流群 : 816227112 idea每次修改module name后重启,module还是会在后面加上原来的name. 这时修改: .idea下的modules.xml 内的module名即可 ...

  2. PHP开发者该知道的多进程消费队列

    引言 最近开发一个小功能,用到了队列mcq,启动一个进程消费队列数据,后边发现一个进程处理不过来了,又加了一个进程,过了段时间又处理不过来了… 这种方式每次都要修改crontab,如果进程挂掉了,不会 ...

  3. 最新版 源码编译 docker

    前言: 最近想研究 docker 源码,那么要研究源码第一步就是学会通过源码编译.然后在网上查找了很多,都是比较老的版本.目前官最新的版本是 18.09.经过一番探索之后,终于成功编译了 下面我把我的 ...

  4. 创建shell脚本文件

    简单来说脚本就是将需要执行的命令保存到文本中,按照顺序(由上往下执行),它是解释型的,不需要 编译 脚本格式 #!/bin/bash或者#!/bin/env bash开头 第一个shell脚本:hel ...

  5. 2020-07-11：session和cookie的区别是什么？

    福哥答案2020-07-11: 1.保存位置:session服务端.cookie客户端.2.安全性:session相对安全,cookie相对不安全.3.存储类型:session能够存储任意的对象,co ...

  6. C#LeetCode刷题之#125-验证回文串（Valid Palindrome）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3899 访问. 给定一个字符串,验证它是否是回文串,只考虑字母和数 ...

  7. .NET或.NET Core Web APi基于tus协议实现断点续传

    前言 前两天我采用技巧式方案基本实现大文件分片上传,这里只是重点在于个人思路和亲身实践,若在实际生产环境要求比较高的话肯定不行,仍存在一些问题需要深入处理,本文继续在之前基础上给出基于tus协议的轮子 ...

  8. golang 工厂模式

    目录 前言 1.介绍 2.分析 1.优点 2.缺点 3.模式扩展 4.适用环境 5.模式结构 类图 时序图 demo 跳转 前言 不做文字的搬运工,多做灵感性记录 这是平时学习总结的地方,用做知识库 ...

  9. 数据库之Oracle优化技巧（一）

    数据库之Oracle优化技巧(一) 1.where子句中的连接顺序 在Oracle数据库中,where子句的执行顺序是自下而上进行解析,根据这个原理,表之间的连接必须写在其他where条件之前,那些可 ...

  10. 浅谈个人学DP的经历和感受

    动态规划的定义! 首先,我们看一下官方定义:定义:动态规划算法是通过拆分问题,定义问题状态和状态之间的关系,使得问题能够以递推(或者说分治)的方式去解决.动态规划算法的基本思想与分治法类似,也是将待求 ...