点击穿透事件-----CSS新属性
面试被问,一脸懵,被提示,还蒙,好丢脸的感觉。。。。赶紧百度了解
.noclick{
pointer-events: none; /* 上层加上这句样式可以实现点击穿透 */
}
就是说重叠在一起的两个元素,给上边元素加这个属性之后,再点击上边元素就可以触发下边元素的事件,即点击穿透事件。
目前不了解用到的场景,以后遇到再来补充。。
和朋友讨论后,朋友说可以用冒泡事件
冒泡的确可以,不过布局不太一样
冒泡的话需要给两个重叠的元素设置父元素,直接给父元素添加点击事件就可以
也是一种思路。
当时听到‘点击穿透’一下蒙了,根本没听过,哎,吃了心理素质不好的亏。。。
以后这种情况还是要和面试官确认场景,冷静下来,用自己熟悉的操作实现它
加油,奥利给
点击穿透事件-----CSS新属性的更多相关文章
- 利用css新属性appearance优化select下拉框
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- css新属性box-sizing应用
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Shape-inside css新属性 几何图形的实现
https://www.w3cplus.com/css3/css-shapes-101.html
- pointer-events属性屏蔽鼠标事件(点击穿透上层元素)
应用场景 我们在 HTML 开发时可能会遇到这样的情况:页面上有一些元素使用绝对定位布局,这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部.默认情况下,下方元素被遮挡的部分是不会响应鼠标事件的 ...
- 点击穿透问题(http://www.tuicool.com/articles/6NfaUnM)
一.click与300ms延迟 移动浏览器提供一个特殊的功能:双击(double tap)放大 300ms的延迟就来自这里,用户碰触页面之后,需要等待一段时间来判断是不是双击(double tap)动 ...
- 【移动端】300ms延迟以及点透事件原因以及解决方案
产生原因 移动端会有双击缩放的这个操作,因此浏览器在click之后要等待300ms,看用户有没有下一次点击,也就是这次操作是不是双击 说完移动端点击300ms延迟的问题,还不得不提一下移动端点击穿透的 ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- hitTest:withEvent:方法(此方法可实现点击穿透、点击下层视图功能)
此方法可实现点击穿透.点击下层视图功能 一. hitTest:withEvent:调用过程 iOS系统检测到手指触摸(Touch)操作时会将其放入当前活动Application的事件队列,UIAppl ...
- div+css的属性
div+css的属性 gCascading Style Sheet 层叠式样式表 ==> 层叠样式表 Internal Style Sheet 内部样式表 External Style Shee ...
随机推荐
- bzoj 2225 [Spoj 2371]Another Longest Increasing
这道题 连续上升的三元组 且已经按照第一维排好序了. 直接上CDQ分治即可 当然也是可以2-Dtree解决这个 问题 但是感觉nlog^2 比nsqrt(n)要快一些.. 算是复习一发CDQ分治吧 也 ...
- 解读生成对抗网络(GAN) 之U-GAN-IT
Unsupervised Generative Attentionnal Networks with Adapter Layer-In(U-GAN-IT) 从字面我们可以理解为无监督生成对抗网络和适配 ...
- GitHub/Git配置与简单的使用
今天我开始了初步的学习,首先从陌生的开始下手,GitHub,自己通过查询网络上的资料有了初步的理解与认识.进行了Git与GitHub的配置. 一.前期准备 首先下载Git,Git官网->http ...
- SpringMvc接收multipart/form-data 传输的数据 及 PostMan各类数据类型的区别
前段时间遇到一个问题,在spring mvc 服务端接收post请求时,通过html 表单提交的时候,服务端能够接收到参数的值.但是使用httpclient4.3构造post请求,却无法接收到参数的值 ...
- java 的API及Object类
一 Java的API Java 的API(API: Application(应用) Programming(程序) Interface(接口)) Java API就是JDK中提供给我们使用的类,这些类 ...
- 关于Hexo,Next主题的‘下一页’、‘上一页’按钮错误显示为html代码 的解决方法
关于Next主题的'下一页'.'上一页'按钮错误显示为html代码的解决方法 我在建立自己的博客过程中遇到了页面'下一页'和'上一页'按钮显示为html代码<i class="fa f ...
- python中os模块操作
学习时总结的一些常用方法>>>> 目录函数 os.getcwd() 返回当前工作目录 os.chdir() 改变工作目录 os.listdir(path="path& ...
- python设计模式之模型-视图-控制器模式
python设计模式之模型-视图-控制器模式 关注点分离( Separation of Concerns, SoC)原则是软件工程相关的设计原则之一. SoC原则背后的思想是将一个应用切分成不同的部分 ...
- Sublime Text 3关闭更新新版本的提醒
1 关闭更新提示前首先需要 输入激活码,下边是我的,亲测有效,无效的话,自行百度填写. ----- BEGIN LICENSE ----- ZYNGA INC. 50 User License EA7 ...
- XSS的构造技巧
XSS的构造技巧 By:Mirror王宇阳 E-mail:2821319009@qq.com 本文为长期持续维护,一旦遇到新的技术技巧将及时更新本文内容 非常的欢迎技术大佬纠正并补充,也欢迎技术同僚讨 ...