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

.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. 4.2 省选模拟赛 流浪者 容斥dp

    求出期望 所有情况很好搞 C(n+m-2,n-1). 也就是说求出所有情况的和乘以上面总方案的逆元即可. 可以发现所有情况和经过多少个障碍点有关 和所处位置无关. 简单的设f[i]表示从1,1到n,m ...

  2. 大话Android中的Handler机制

    在Android的线程间通信中,Handler独当一面,无论是framework层还是app层中都出现的相当频繁,有必要好好的拿出来深挖一下它的实现原理.而要说Handler的通信机制,除了Handl ...

  3. linux集群服务网络状态(netstat),服务端页面(图形字符页面)基本配置

    Linux网络基础配置 yum -y install vim        安装vim 关闭的防火墙服务 iptables -F iptables -X iptables -Z systemctl s ...

  4. Android Studio连接数据库实现增删改查

    源代码如下: DBUtil.java: package dao; import java.sql.Connection; import java.sql.DriverManager; import j ...

  5. Hive对字段进行urlDecode

    最近项目中需要对埋点日志hive表进行分析,并且按一定的规则统计出来满足要求的用户pin.本来以为是一件比较简单的事,结果在查看导出的词表时发现很多带有"%"的明显具有url en ...

  6. Linux学习笔记之如何在图形界面旁边把终端添加显示出来

    首先旁边无终端,我们可以点击ctrl+alt+t,可以把终端显示出来 右键点击终端,然后点击Lock to Launcher,然后完成 PS:不想显示也可以点击其右键,选择Unlock from La ...

  7. 详解GaussDB(for MySQL)服务：复制策略与可用性分析

    摘要:本文通过介绍GaussDB(for MySQL)读写路径,分析其可用性. 简介 数据持久性和服务可用性是数据库服务的关键特征. 在实践中,通常认为拥有 3 份数据副本,就足以保证持久性. 但是 ...

  8. puppet单机模型

    puppet配置 命令 facter -p: 显示所有的变量 puppet apply [-v] [--noop] [-e 'puppet expression: 一般为include httpd等' ...

  9. homekit_四路继电器

    这款继电器使用苹果手机进行控制,有普通版本和点动版本可供选择,有兴趣的可以去以下链接购买: https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-1 ...

  10. golang 工厂模式

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