(转)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 ...
随机推荐
- #6278. 数列分块入门 2(询问区间内小于某个值 xx 的元素个数)
题目链接:https://loj.ac/problem/6278 题目大意:中文题目 具体思路:数列分块模板题,对于更新的时候,我们通过一个辅助数组来进行,对于原始的数组,我们只是用来加减,然后这个辅 ...
- 7.4mybatis整合ehcache(mybatis无法实现分布式缓存必须和其他缓存框架整合)
<\mybatis\day02\14查询缓存-二级缓存-整合ehcache.av> mybatis的缓存机制(一级缓存二级缓存和刷新缓存)和mybatis整合ehcache-- 这里有做本 ...
- Tip: JSP开发模式
SUN公司推出JSP技术后,同时也推荐了两种web应用程序的开发模式,一种是JSP+JavaBean模式,一种是Servlet+JSP+JavaBean模式. JSP+JavaBean模式适合开发业务 ...
- CentOS 7安装Redis
第一步:安装gcc依赖 先通过gcc -v是否有安装gcc,如果没有安装,执行命令 yum install -y gcc(yum install -y gcc-c++) 第二步:下载redis安装包 ...
- 论文笔记系列-Neural Network Search :A Survey
论文笔记系列-Neural Network Search :A Survey 论文 笔记 NAS automl survey review reinforcement learning Bayesia ...
- oracle-----视图/物化视图
什么是视图 视图(view),也称虚表, 不占用物理空间,这个也是相对概念,因为视图本身的定义语句还是要存储在数据字典里的. 视图只有逻辑定义.每次使用的时候,只是重新执行SQL. 视图是从一个或多个 ...
- listView从底部回到顶部代码实现
可用如下方法: 1.平滑的回到顶部,但是会划过中间的每一页 mListView.getRefreshableView().smoothScrollToPosition(0); 2.直接跳到顶部 if ...
- Java HashMap工作原理及实现[转]
原文:http://yikun.github.io/2015/04/01/Java-HashMap%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86%E5%8F%8A%E5%AE ...
- Boost 序列化
原文链接: https://blog.csdn.net/qq2399431200/article/details/45621921 1. 编译器 gcc, boost 1.55 2.1第一个简单的例子 ...
- python使用pudb调试
pudb是pdb的升级版本 安装 pip3 install pudb 使用方法 在程序文件的开头导入包 from pudb import set_trace set_trace()#断点位置 运行的时 ...