html 透明层禁止点击事件,(转)CSS3之pointer-events(屏蔽鼠标事件)属性说明
我们在 HTML 开发时可能会遇到这样的情况:页面上有一些元素使用绝对定位布局,这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部。默认情况下,下方元素被遮挡的部分是不会响应鼠标事件的。
但有时我们可能需要被遮盖住的元素仍然能够处理鼠标事件。 比如:我们在一个地图组件上覆盖了一个显示信息的元素,但又不想让这个信息面板影响下方地图的拖动等操作。那么我们可以使用一个叫 pointer-events 的 css 属性来实现。
一、pointer-events 属性介绍
1,属性值说明
pointer-events 是 CSS3 中新增的一个属性,其支持的值大多都与 SVG 相关,我们不用理会。对我们来说,主要关注:none|auto 这两个属性值。
auto:与 pointer-events 属性未指定时的表现效果相同。
none:该元素永远不会成为鼠标事件的 target。但是,当其后代元素的 pointer-events 属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
pointer-events:none 注意事项:
使用 pointer-events:none 来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。
如果元素后代明确指定了 pointer-events 属性并允许其成为鼠标事件的目标,那么指向该元素的任何事件在事件传播过程中都将通过父元素,并以适当的方式触发其上的事件侦听器。
当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(将会穿过父元素而指向位于其下面的元素)。
2,浏览器兼容情况
(1)桌面浏览器
IE:11+(IE6~IE10均不支持)
Firefox:3.6+
Chrome:4.0+
Safari:6.0
Opera:15.0
(2)移动设备浏览器
iOS Safari:6.0
Android Browser:2.1+
Android Chrome:18.0+
二、使用样例
1,让链接不能点击
这里将第二个 a 标签 pointer-events 样式属性设置为 none,那么该链接不仅无法被点击,而且没有鼠标手形样式。(同样的,我们可以使用该样式来避免按钮多次点击、表单重复提交等问题。)
- 可以点击的链接
- 不能点击的链接
2,让鼠标点击穿透上方的 div
(1)效果图
下面样例中黄色半透明的 div 使用绝对定位,覆盖在链接的上方。
默认情况下,黄色区域下方的链接我们是没法点击到的。
这里我们对黄色 div 加上一个 pointer-events 属性后,就可以穿过该层去点击下面的 a 标签了。
(2)样例代码
.top {
width: 100px;
height: 90px;
position: absolute;
top: 0;
left: 65px;
background: yellow;
opacity: 0.5;
pointer-events: none;
}
- 航歌
- hangge.com
pointer-events属性屏蔽鼠标事件(点击穿透上层元素)
应用场景 我们在 HTML 开发时可能会遇到这样的情况:页面上有一些元素使用绝对定位布局,这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部.默认情况下,下方元素被遮挡的部分是不会响应鼠标事件的 ...
浏览器 Pointer Events
前言 Pointer Events是一套触控输入处理规格,支持Pointer Events的浏览器包括了IE和Firefox,最近Chrome也宣布即将支持该处理规则. PointerEvent Po ...
HTML 事件属性(下)
HTML 事件属性(下) 一:键盘事件 (Keyboard Events)二:鼠标事件 (Mouse Events) 一:键盘事件 (Keyboard Events)在下列元素中无效:base.bdo ...
css屏蔽元素的鼠标事件pointer-events
// 屏蔽点击 $('body').css('pointer-events', 'none'); //恢复默认 $('body').css('pointer-events', 'auto'); 用 ...
win10 支持默认把触摸提升鼠标事件 打开 Pointer 消息
原文:win10 支持默认把触摸提升鼠标事件 打开 Pointer 消息 在 WPF 经常需要重写一套触摸事件,没有UWP的Pointer那么好用. 如果一直都觉得 WPF 的触摸做的不好,或想解决 ...
C#引用CefSharp并屏蔽鼠标右键和禁止拖动放置事件
原文:C#引用CefSharp并屏蔽鼠标右键和禁止拖动放置事件 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013564470/article/ ...
QT--控件屏蔽鼠标点击事件
源博客:https://blog.csdn.net/qiufenpeng/article/details/81745266 最近学习QT写一个小界面想屏蔽鼠标点击,原来只要一个函数就搞定了. ui-& ...
css3 -阻止元素成为鼠标事件目标 pointer-events
pointer-events:auto|none 其中pointer-events:none:元素永远不会成为鼠标事件的target.
css3 pointer-events 让对象如透明般直接响应下层对象的鼠标事件
引用:http://www.css88.com/book/css/properties/user-interface/pointer-events.htm 语法: pointer-events:aut ...
随机推荐
mybatis配置问题
//当构造函数有多个参数时,可以使用constructor-arg标签的index属性,index属性的值从0开始.
项目二(业务GO)——跨域上传图片(请求接口)
之前,就听过“跨域上传”图片的问题,只是疏于研究,也就一再搁置,直至今天再次遇见这个不能避免的“坑”,才不得不思考一下,怎么“跨域上传”图片或者文件? 问题来源: 何为“跨域”? ——就是给你一个接口 ...
Bad version number in .class file
TY项目是用JDK1.6做的,早先在电脑上装了一个1.5的,这回就不能用了.为了能用,我就又装了一个1.6的,修改了环境变量之后,以为一切OK.开始测试,首先在Myeclipse中打开我用1.5编的一 ...
OpenStack 镜像制作之cloud-init
Contents [hide] 1 背景 2 密钥登录 2.1 密钥登录的原理 2.1.1 openstack的私钥 2.1.2 密码注入 = 2.1.3 实际遇到的情况 2.1.4 解决办法 背景 ...
Good subsequence( RMQ+二分)
Description Give you a sequence of n numbers, and a number k you should find the max length of Good ...
Android.mk各种文件编译汇总
一.源代码编译 1.1 so预编译 LOCAL_PATH:= $(call my-dir) include $(CLEAR_VARS) LOCAL_MODULE := libAppArea LOCAL ...
得到指定进程PID
//#include "targetver.h" #include "stdio.h" #include #include ...
获取某个文件夹中所有txt文件
Qt窗口的标题栏自绘
因个人需要,要修改Qt Widget的标题栏,网上找了大半天,没有得到答案,但发现问的人比较多 所以现将找到的此文分享一下. (原文:http://www.qtsoftware.com/develop ...
Markdown转HTML/pdf格式
Markdown转HTML/pdf格式 通过_github自带_的更新博客的网页: https://github.com/YOUR_GITHUB_ACCOUNT/YOUR_GITHUB_ACCOUNT ...
html 透明层禁止点击事件,(转)CSS3之pointer-events(屏蔽鼠标事件)属性说明相关推荐
- java焦点事件如何使用_Java中如何释放鼠标事件的焦?
1.使用MouseListener接口处理鼠标事件 鼠标事件有5种:按下鼠标键,释放鼠标键,点击鼠标键,鼠标进入和鼠标退出 mousePressed(MouseEvent e) 鼠标按下时调用 mou ...
- Qt安装事件过滤器、过滤子控件事件、截获控件按键、鼠标事件
Qt安装事件过滤器.过滤子控件事件.截获控件按键.鼠标事件 Qt的事件模型一个强大的功能是一个QObject对象能够监视发送其他QObject对象的事件,在事件到达之前对其进行处理. 假设我们有一个C ...
- (转)CSS3之pointer-events(屏蔽鼠标事件)属性说明
我们在 HTML 开发时可能会遇到这样的情况:页面上有一些元素使用绝对定位布局,这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部.默认情况下,下方元素被遮挡的部分是不会响应鼠标事件的. 但有时 ...
- python鼠标点击事件event_opencv-python教程学习系列5-处理鼠标事件
前言 opencv-python教程学习系列记录学习python-opencv过程的点滴,本文主要介绍opencv-python处理鼠标事件,坚持学习,共同进步. 系统环境 系统:win_x64; p ...
- qt linux 鼠标事件,QT学习笔记5:QMouseEvent鼠标事件简介
一.QMouseEvent的详细描述 首先请注意,Qt中的QMouseEvent一般只涉及鼠标左键或右键的单击.释放等操作,而对鼠标滚轮的响应则通过QWheeEvent来处理. QMouseEvent ...
- winform屏蔽鼠标事件
方法一:禁用鼠标事件 public partial class Form1 : Form,IMessageFilter { public Form1() { InitializeComponent() ...
- python不属于鼠标事件的是_selenium-webdriver(python) (十五) -- 鼠标事件
本节重点: ActionChains 类 context_click() 右击 double_click() 双击 drag_and_drop() 拖动 测试的产品中有一个操作是右键点击文件列 ...
- html5鼠标事件监听,canvas图形监听鼠标事件
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 let cs = new CanvasMaker.Canvas('container'); let ctx ...
- 【CSS3 穿透属性:pointer-events (可穿透图层的鼠标事件)】
先说一下什么时候会用到这个属性,比如上方这个搜索框,搜索图标 使用的是绝对定位,它覆盖在了 父元素上面 ,现在用鼠标点击它 是无法点击到input框进行输入的,而我想实现一个功能:当 ...
最新文章
- opencv-python视频处理之白闪效果
- 词法分析-中文分词技术-正向最大匹配法与逆向最大匹配法
- mysql 基础配置经验
- WCF分布式开发步步为赢(0):WCF学习经验分享,如何更好地学习WCF?
- 【Java语法】抽象类、接口、内部类
- Kubernetes API 与 Operator:不为人知的开发者战争
- Eclipse中导入Java项目出现“No projects are found to import”
- boost学习之简介
- 超定方程组的经典Gram-Schmidt正交化解法
- 什么是编译、什么是连接。C++代码如何变成机器码,如何跨平台和嵌入式?嵌入式开发
- 更新sqlmap1.5.5版本教程(附带下载地址)
- 【Windows脚本】打印机脚本2-共享打印机
- MPU6050 六轴传感器实验
- 模型实践 | Alphafold 蛋白质结构预测
- Simon‘s writting 全网最全笔记
- 【网络安全必看】如何提升自身WEB渗透能力?
- 全电动梅赛德斯EQS年底将在曼谷生产下线;麦格纳突破车尾照明技术2023年可投入生产 | 美通企业日报...
- 普通最小二乘法讲解OLS线性回归
- 偏度与峰度(附python代码)
- Python Level 4 程序题:输入两个整数,倒序输出
热门文章
- ClickHouse在苏宁用户画像场景的最佳实践
- DVB信道编解码与调制解调
- 【机器学习】Radius Neighbors Classifier(rNN,radius nearest neighbors)
- 戴尔计算机的机械硬盘容量,新款戴尔g3加装机械硬盘教程终极版
- 戴尔r930服务器U盘装系统,云骑士u盘装机大师dell怎么用u盘装系统
- 背包九讲之一:01背包问题
- 短信管理器android,短信夹管理软件-短信夹管理app预约v1.4.3 安卓版-西西软件园...
- windowbuilder怎么加背景图_抖音吸粉新套路,主页背景图太太太太有心机了
- 毛永胜计算机教师,做新时代智慧型阳光教师 ——记丁香路小学教师心理健康实训讲座...
- python 成语接龙