点击穿透事件-----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 ...
随机推荐
- [转]Nginx介绍-反向代理、负载均衡
原文:https://www.cnblogs.com/wcwnina/p/8728391.html 作者:失恋的蔷薇 1. Nginx的产生 没有听过Nginx?那么一定听过它的"同行&qu ...
- 无所不能的Embedding 1 - Word2vec模型详解&代码实现
word2vec是google 2013年提出的,从大规模语料中训练词向量的模型,在许多场景中都有应用,信息提取相似度计算等等.也是从word2vec开始,embedding在各个领域的应用开始流行, ...
- tracebace用法
介绍一下traceback 平时看到的程序的错误信息也就是traceback信息 举个简单例子: import traceback try: s = [1, 2, 3] print s[5] exce ...
- 文件上传 tp3.2 webuploader插件
1.新建上传页面 <!doctype html> <html lang="en"> <head> <meta charset=" ...
- 职场老鸟,一文教你如何正确入门Python爬虫!
爬虫现在的火热程度我就不说了,先说一下这门技术能干什么事儿,主要为以下三方面: 1.爬取数据,进行市场调研和商业分析 爬取知乎.豆瓣等网站的优质话题内容:抓取房产网站买卖信息,分析房价变化趋势.做不同 ...
- 使用Python从PDF文件中提取数据
前言 数据是数据科学中任何分析的关键,大多数分析中最常用的数据集类型是存储在逗号分隔值(csv)表中的干净数据.然而,由于可移植文档格式(pdf)文件是最常用的文件格式之一,因此每个数据科学家都应该了 ...
- 在centos 上安装python
1.下载最新版本python源码包 下载地址为https://www.python.org/ftp/python/3.8.5/Python-3.8.5.tgz 2.解压源码包 tar -zxf Pyt ...
- java 异常二
一 捕获异常try…catch…finally 捕获:Java中对异常有针对性的语句进行捕获,可以对出现的异常进行指定方式的处理 捕获异常格式: try { //需要被检测的语句. } catch(异 ...
- ubuntu升级已安装git版本
# To get the very latest version of git, you need to add the PPA (Personal Package Archive) from the ...
- MongoDB学习3:聚合查询
1. 什么是MongoDB聚合框架 1.1 MongoDB聚合框架(Aggregation Frameworn)是一个计算框架,它可以: ● 作用在一个或几个集合上 ● 对集合中的数据 ...