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

.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. 使用jsdelivr + GitHub + PicGo搭建免费图床

    前言 之前一直有开通有道云笔记会员,主要是为了会员markdown图片可以在线保存的功能,前一阵子会员到期,考虑这个功能可不可以自己单独实现,从而替代使用有道云会员. 通过网上搜索的方式,查询到了几种 ...

  2. mysqld_multi多实例部署

    mysql多实例部署 目录 mysql多实例部署 下载软件 配置用户和组并解压二进制程序至/usr/local下 创建实例数据存放的目录 初始化各实例 配置配置文件/etc/my.cnf 启动各实例 ...

  3. node日志管理 / pm2-logrotate-ext日志管理

    本篇文章说的是,如何使用pm2管理node项目的日志输出(切割和备份),文章步骤是基于已经安装了pm2的前提下,没有的,请自行百度. 第一步:需要登录公司服务器,查看一下目前服务器保存的所有日志(用于 ...

  4. C++STL算法

    1.不变序列算法 不会修改算法所作用的容器或对象 适用于顺序容器和关联容器,时间复杂度为O(n). 2.变值算法 会修改源区间或目标区间元素的值,值被修改的那个区间,不可属于关联容器. 3.删除算法 ...

  5. PEP8之常用编码规范-摘自官网

    PEP8是广泛应用于Python编码中的规范,这里只会记录最重要的一部分:摘自官网 使用4个空格缩进,不要使用制表符. 4个空格是一个在小缩进(允许更大的嵌套深度)和大缩进(更容易阅读)的一种很好的折 ...

  6. 「MoreThanJava」Day 4：面向对象基础

    「MoreThanJava」 宣扬的是 「学习,不止 CODE」,本系列 Java 基础教程是自己在结合各方面的知识之后,对 Java 基础的一个总回顾,旨在 「帮助新朋友快速高质量的学习」. 当然 ...

  7. python8.4景区买票

    from threading import Threadimport threadinglock=threading.Lock()num=100#定义买票方法def sale(name): lock. ...

  8. 【java】解决java compiler level does not match the version of the installed java project facet

    翻译内容:java编译器jdk版本与安装的java项目方面的版本不匹配 修改编译器jdk版本 项目右键选择->properties 如果项目的开发版本为,jdk1.8 ,选择修改为1.8 ,点击 ...

  9. GitHub上最火的SpringCloud微服务商城系统项目，附全套教程

    项目介绍 mall-swarm是一套微服务商城系统,采用了 Spring Cloud Greenwich.Spring Boot 2.MyBatis.Docker.Elasticsearch等核心技术 ...

  10. MyBatis-Pro，新一代的MyBatis增强框架

    框架功能 内置提供基础CRUD方法 提供根据方法名自进行单表查询(包括查询.统计.删除等) 接入方法 Spring Boot <dependency> <groupId>com ...