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 ...