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

  1. .noclick{
  2.    pointer-events: none;  /* 上层加上这句样式可以实现点击穿透 */
  3. }

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

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

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

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

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

也是一种思路。

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

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

加油，奥利给

点击穿透事件-----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. electron开发 - mac关闭和隐藏窗口

    针对mac平台的app let willQuitApp = false; // 控制退出方式 mainWindow.on('close', (e) => { if (willQuitApp) { ...

  2. 认识SpringData JPA

    简介 JPA全称Java Persistence API,中文名是Java持久层API.用来描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. 名词解释 RDS:关系型数据库服务 Re ...

  3. 一文学会MySQL的explain工具

    开篇说明 (1) 本文将细致介绍MySQL的explain工具,是下一篇<一文读懂MySQL的索引机制及查询优化>的准备篇. (2) 本文主要基于MySQL5.7版本(https://de ...

  4. 我的强迫症系列之@Builder和建造者模式

    前言 备受争议的Lombok,有的人喜欢它让代码更整洁,有的人不喜欢它,巴拉巴拉一堆原因.在我看来Lombok唯一的缺点可能就是需要安装插件了,但是对于业务开发的项目来说,它的优点远远超过缺点. 我们 ...

  5. 017_go语言中的指针

    代码演示 package main import "fmt" func zeroval(ival int) { ival = 0 } func zeroptr(iptr *int) ...

  6. 《Spanner: Google’s Globally-Distributed Database》论文总结

    Spanner 总结 说明:本文为论文 <Spanner: Google's Globally-Distributed Database> 的个人理解,难免有理解不到位之处,欢迎交流与指正 ...

  7. python爬虫：XPath语法和使用示例

    python爬虫:XPath语法和使用示例 XPath(XML Path Language)是一门在XML文档中查找信息的语言,可以用来在XML文档中对元素和属性进行遍历. 选取节点 XPath使用路 ...

  8. ASP.NET Core3.x 基础（1）

    ASP.NET Core与2.x相比发生的一些变化: 项目结构 Blazor SignalR gRPC 关于Program类:Main方法,在系统执行时就会找到这个Main方法,实际上是配置了ASP. ...

  9. C#LeetCode刷题之#485-最大连续1的个数（Max Consecutive Ones）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3714 访问. 给定一个二进制数组, 计算其中最大连续1的个数. ...

  10. 【HAOI2015】树上染色 - 树形 DP

    题目描述 有一棵点数为 N 的树,树边有边权.给你一个在 0~ N 之内的正整数 K ,你要在这棵树中选择 K个点,将其染成黑色,并将其他 的N-K个点染成白色 . 将所有点染色后,你会获得黑点两两之 ...