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

.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. luogu P2510 [HAOI2008]下落的圆盘

    LINK:下落的圆盘 计算几何.n个圆在平面上编号大的圆将编号小的圆覆盖求最后所有没有被覆盖的圆的边缘的总长度. 在做这道题之前有几个前置知识. 极坐标系:在平面内 由极点 极轴 和 极径组成的坐标系 ...

  2. Dockerfile你值得拥有

    Dockerfile 介绍 什么是Dockerfile Dockerfile是一个用来将你的应用构建为docker镜像的文本文件,文本中的内容是一条一条的指令,这些指令的集合在docker引擎中执行, ...

  3. 她娇羞道“不用这样细致认真的说啊~~”———详细图解在Linux环境中创建运行C程序

    她娇羞说,不用这样细致认真的说啊———详细图解在Linux环境中创建运行C程序“不,这是对学习的负责”我认真说到 叮叮叮,停车,让我们看看如何在Linux虚拟机环境中,创建运行C程序 详细图解在Lin ...

  4. Hotspot GC研发工程师也许漏掉了一块逻辑

    本文来自: PerfMa技术社区 PerfMa(笨马网络)官网 概述 今天要说的这个问题,是我经常面试问的一个问题,只是和我之前排查过的场景有些区别,属于另外一种情况.也许我这里讲了这个之后,会成为不 ...

  5. Pytorch_第八篇_深度学习 (DeepLearning) 基础 [4]---欠拟合、过拟合与正则化

    深度学习 (DeepLearning) 基础 [4]---欠拟合.过拟合与正则化 Introduce 在上一篇"深度学习 (DeepLearning) 基础 [3]---梯度下降法" ...

  6. 关于import android.support.v4.app.ContextCompat;找不到contextcompat的解决方法

    android迁移到了androidx,那么相关库的import就有问题了,需要转变为androidx的,这里比如 import android.support.v4.app.ContextCompa ...

  7. NodeJs nrm 和 nvm

    nrm 和 nvm nrm (npm registry manager)是npm的镜像源管理工具 nvm (node version manager)是nodejs的版本管理工具 nrm # nrm ...

  8. Spring/Springboot——JavaConfig

    1.认识JavaConfig JavaConfig是Spring的一个子项目,在Spring4之后成为一个核心功能 JavaConfig中使用的注解: @Configuration 在类上打上这一标签 ...

  9. Provisional headers are shown 问题的一种情况

    Provisional headers are shown 出现在请求头的报错里面,意思为 显示临时的头部,真实的意思是,请求没有收到服务器返回.如果出现类似情况, 可以在服务端找一找,是否没有给该请 ...

  10. 从ReentrantLock详解AQS原理源码解析

    数据结构 java.util.concurrent.locks.AbstractQueuedSynchronizer类中存在如下数据结构. // 链表结点 static final class Nod ...