(转)CSS3之pointer-events(屏蔽鼠标事件)属性说明
我们在 HTML 开发时可能会遇到这样的情况:页面上有一些元素使用绝对定位布局,这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部。默认情况下,下方元素被遮挡的部分是不会响应鼠标事件的。
但有时我们可能需要被遮盖住的元素仍然能够处理鼠标事件。 比如:我们在一个地图组件上覆盖了一个显示信息的元素,但又不想让这个信息面板影响下方地图的拖动等操作。那么我们可以使用一个叫 pointer-events 的 css 属性来实现。
一、pointer-events 属性介绍
1,属性值说明
- auto:与 pointer-events 属性未指定时的表现效果相同。
- none:该元素永远不会成为鼠标事件的 target。但是,当其后代元素的 pointer-events 属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
使用 pointer-events:none 来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。
如果元素后代明确指定了 pointer-events 属性并允许其成为鼠标事件的目标,那么指向该元素的任何事件在事件传播过程中都将通过父元素,并以适当的方式触发其上的事件侦听器。
当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(将会穿过父元素而指向位于其下面的元素)。
2,浏览器兼容情况
- IE:11+(IE6~IE10均不支持)
- Firefox:3.6+
- Chrome:4.0+
- Safari:6.0
- Opera:15.0
- iOS Safari:6.0
- Android Browser:2.1+
- Android Chrome:18.0+
二、使用样例
1,让链接不能点击
这里将第二个 a 标签 pointer-events 样式属性设置为 none,那么该链接不仅无法被点击,而且没有鼠标手形样式。(同样的,我们可以使用该样式来避免按钮多次点击、表单重复提交等问题。)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li><a href="http://www.hangge.com">可以点击的链接</a></li>
<li><a href="http://www.hangge.com" style="pointer-events:none">不能点击的链接</a></li>
</ul>
</body>
</html>
2,让鼠标点击穿透上方的 div
(1)效果图
- 下面样例中黄色半透明的 div 使用绝对定位,覆盖在链接的上方。
- 默认情况下,黄色区域下方的链接我们是没法点击到的。
- 这里我们对黄色 div 加上一个 pointer-events 属性后,就可以穿过该层去点击下面的 a 标签了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.top {
width: 100px;
height: 90px;
position: absolute;
top: 0;
left: 65px;
background: yellow;
opacity: 0.5;
pointer-events: none;
}
</style>
</head>
<body>
<!-- 下方的链接 -->
<ul>
<li><a href="http://www.hangge.com">航歌</a></li>
<li><a href="http://www.hangge.com">hangge.com</a></li>
</ul>
<!-- 上方黄色div -->
<div class="top"></div>
</body>
</html>
(转)CSS3之pointer-events(屏蔽鼠标事件)属性说明的更多相关文章
- 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. <!DOCTYPE html> <html l ...
- css3 pointer-events 让对象如透明般直接响应下层对象的鼠标事件
引用:http://www.css88.com/book/css/properties/user-interface/pointer-events.htm 语法: pointer-events:aut ...
随机推荐
- Flask表单(form)的应用
导入模块request模块 #指定请求方式,使用methods属性 @app.route("/",methods=['GET','POST']) def index(): #判断c ...
- IndexedDB API
参考链接:https://wangdoc.com/javascript/bom/indexeddb.html
- thinkpad e系列 装win7过程
电脑买回来时是win8系统,但是卡顿的厉害,装成win7,win8装win7流程还是比较复杂,后来又装成xp,现在又改成win7,记录一下装win7 的过程 我是用光盘安装的系统 第一步:进入boss ...
- 获取AWR报告
1.进入sqlplus [oracle@localhost admin]$ sqlplus / as sysdba SQL Production :: Copyright (c) , , Oracle ...
- linux 服务器下的基本操作
1.SSH 上传: scp /path/file(这部分为本地的路径) user(远端目标用户名)@host(远端目标IP):/pathorfile(文件存储路径) 下载: scp user(远端用户 ...
- 使用WPF动态显示CPU使用率
基于WPF的开源图表控件有很多,大多数都是静态图表,如果需要绘制CPU使用率这样的动态数据就显得力不从心,微软开源的DynamicDataDisplay控件弥补了这个不足,为了做个备忘,我用它来实时绘 ...
- CDHtmlDialog探索----Javascript与窗体交互
CDHtmlDialog提供了C++与网页的双向交互,通此一系统简单的宏调用可以把网页中各元素的事件直接映射到C++程序中,而在网页中调用C++功能代码就显的不那么直观了.归根结底交互的基理就是实现相 ...
- centos配置小程序https和wss协议
用nginx做代理,conf.d下ssl.conf配置成https,wss在nginx.conf里http某块中配置 例代码如下: ssl.conf-->https server { liste ...
- RT-thread嵌入式操作系统相关的问题
面试中问到 RT-thread嵌入式操作系统相关的问题 RT-thread操作系统调度器的实现细节 RT-Thread中提供的线程调度器是基于优先级的全抢占式调度: 在系统中除了中断处理函数.调度器上 ...
- MySQL高可用方案-PXC(Percona XtraDB Cluster)环境部署详解
MySQL高可用方案-PXC(Percona XtraDB Cluster)环境部署详解 Percona XtraDB Cluster简称PXC.Percona Xtradb Cluster的实现是在 ...