介绍

pointer-events是css3的一个属性,指定在什么情况下元素可以成为鼠标事件的target(包括鼠标的样式)

属性值

pointer-events属性有很多值,但是对于浏览器来说,只有auto和none两个值可用,其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。

/* Keyword values */

pointer-events: auto; /* 默认 */

pointer-events: none;

pointer-events: visiblePainted; /* SVG only */

pointer-events: visibleFill;  /* SVG only */

pointer-events: visibleStroke;  /* SVG only */

pointer-events: visible;  /* SVG only */

pointer-events: painted;  /* SVG only */

pointer-events: fill;  /* SVG only */

pointer-events: stroke;  /* SVG only */

pointer-events: all;  /* SVG only */

/* Global values */

pointer-events: inherit;

pointer-events: initial;

pointer-events: unset;

pointer-events属性值详解

  • auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。

  • none——元素永远不会成为鼠标事件的target(目标)。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。实际上默

     认就可以穿透当前层,因为pointer-events默认为auto

浏览器兼容性

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性,IE6/7/8/9都不支持,Opera在SVG中支持该属性但是HTML中不支持。

检测浏览器是否支持该属性的JS代码,其实也可以用来检测其他的属性

var supportsPointerEvents = (function(){
var dummy = document.createElement('_');
if(!('pointerEvents' in dummy.style)) return false;
dummy.style.pointerEvents = 'auto';
dummy.style.pointerEvents = 'x';
document.body.appendChild(dummy);
var r = getComputedStyle(dummy).pointerEvents === 'auto';
document.body.removeChild(dummy);
return r;
})();

为什么要设置两次pointerEvents的属性呢?

dummy.style.pointerEvents = ‘auto’;

dummy.style.pointerEvents = ‘x’;

解读:明显的是x会把之前赋值的auto覆盖掉,后面用了getComputedStyle这个方法。由于x是个无效的值,所以如果浏览器支持pointer-event这个css属性的话,计算出来的样式应该是auto。

使用JS替代实现pointerEvents穿透当前层的效果

function noPointerEvents (element) {
$(element).bind('click mouseover', function (evt) {
this.style.display = 'none';
var x = evt.pageX, y = evt.pageY,
under = document.elementFromPoint(x, y);
this.style.display = '';
evt.stopPropagation();
evt.preventDefault();
$(under).trigger(evt.type);
});
}

elementFromPoint:返回给定坐标处的所在的元素

使用实例:document.elementFromPoint(100,100)

trigger:触发被选元素指定的事件类型

event.type:返回事件类型

实例一

案例一:穿透当前层

在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖

住下面的地图层,以至于地图层无法操作。。。

然后正好在Google map见到了类似的问题,拿来当例子来说:

Google map中左上角的操作区域占位是挺大的,如红色框区域,然后在这个区域是无法操作地图层的。那么我们就可以给这个div设置 pointer-events:none,然后你就会发现下面的地图就可以拖动和点击了。

但是悲剧的是,操作区域本身却无法操作了,直接被无视掉了。不过不用担心,我们可以给里面的元素重新设置为 pointer-events:auto,当然,只给需要操作的元素区域设置。

貌似有点儿纠结,不过这样可以保证地图本身的可操作区域最大化。

实例二:pointer-events 可以禁用 HTML 元素的 hover/focus/active 等动态效果。

案例一:禁用 a 标签事件效果

在做 tab 切换的时候,当选中当前项,禁用当前标签的事件,只有切换其他 tab 的时候,才重新请求新的数据。

  •  <!--CSS-->
    <style>
    .active{
    pointer-events: none;
    }
    </style>
    <!--HTML-->
    <ul>
    <li><a class="tab"></a></li>
    <li><a class="tab active"></a></li>
    <li><a class="tab"></a></li>
    </ul>复制代码

案例二:切换开/关按钮状态

点击提交按钮的时候,为了防止用户一直点击按钮,发送请求,当请求未返回结果之前,给按钮增加 pointer-events: none,可以防止这种情况,这种情况在业务中也十分常见。

 <!--CSS-->
.j-pro{ pointer-events: none; }
<!--HTML-->
<button r-model={this.submit()} r-class={{"j-pro": flag}}>提交</button>
<!--JS-->
submit: function(){
  this.data.flag = true;
  this.$request(url, {
    // ... onload: function(json){
        if(json.retCode == 200){
          this.data.flag = false;
        } }.bind(this)
    // ...
  });
}

案例三:防止透明元素和可点击元素重叠不能点击

一些内容的展示区域,为了实现一些好看的 css 效果,当元素上方有其他元素遮盖,为了不影响下方元素的事件,给被遮盖的元素增加 pointer-events: none; 可以解决。

 <!--CSS-->
.layer{ backround: linear-gradient(180deg, #fff, transparent); }
.j-pro{ poninter-events: none; }
<!--HTML-->
<ul>
  <li class="layer j-pro"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

参考

CSS3 pointer-events介绍

MDN pointer-events

网易考拉前端团队 css3 pointer-events 介绍

CSS3 pointer-events:none应用举例及扩展

非常有用的pointer-events属性的更多相关文章

  1. 浏览器 Pointer Events

    前言 Pointer Events是一套触控输入处理规格,支持Pointer Events的浏览器包括了IE和Firefox,最近Chrome也宣布即将支持该处理规则. PointerEvent Po ...

  2. 自己用过的一些比较有用的css3新属性

    css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开始慢慢的去了解并使用css3(还有html5),因为我觉得这是一种趋势,它是一种已经被制定的标准.我并不 ...

  3. OpenLayers 比较有用的对象和属性

    1.ol.interaction.Pointer     是管理地图down.move.up事件的基类,也用于管理地图拖拽事件.     构造函数结构如下: new ol.interaction.Po ...

  4. 一些有用的HTML5 pattern属性

    最近在做手机页面时,遇到数字输入的键盘的问题,之前的做法只是一刀切的使用 type="tel",不过一直觉得九宫格的电话号码键盘上的英文字母太碍事了.于是想要尝试其它的实现方案,最 ...

  5. js中Function引用类型中一些常见且有用的方法和属性

    Function类型 函数由于是Function类型的一个实例,所以函数名就是一个指向函数对象的指针,不会与某个函数死死的连接在一起,这也导致了js中没有真正的重载,但好处是,函数对象可以作为另一个函 ...

  6. javascript code snippet -- Forwarding Mouse Events Through Layers

    Anyone who has worked with web apps has likely created a masking element at some point, and the grea ...

  7. ExtJS笔记 Using Events

    Using Events The Components and Classes of Ext JS fire a broad range of events at various points in ...

  8. [No000098]SVN学习笔记5-分支,合并,属性,补丁,锁,分支图

    行结束符和空白选项 在项目的生命周期中,有时可能会将行结束符由 CRLF 改为 LF,或者修改一段代码的缩进.不幸的是这样将会使大量的代码行被标记为已修改,尽管代码本身并没有被修改.这里列出的选项将会 ...

  9. delphi控件属性大全-详解-简介

    http://blog.csdn.net/u011096030/article/details/18716713 button 组件: CAPTION 属性 :用于在按钮上显示文本内容 Cancel ...

  10. Python进阶之“属性(property)”详解

    Python中有一个被称为属性函数(property)的小概念,它可以做一些有用的事情.在这篇文章中,我们将看到如何能做以下几点: 将类方法转换为只读属性 重新实现一个属性的setter和getter ...

随机推荐

  1. 空指针/0/NULL

    空指针/0/NULL 空指针是一个被赋值为0的指针,在没有被具体初始化之前,其值为0. NULL 是一个标准规定的宏定义,用来表示空指针常量. #define NULL 0   或者 #define ...

  2. CollectionUtils

    public class CollectionUtils { /** * 数组是否包含元素 * @param arr * @param str * @return */ public static b ...

  3. 语法错误 : 缺少“;”(在“<”的前面)

    该错误有可能是由错误所指行“<”附近的某个类型忘记#include <>所造成的

  4. MOCK服务小结

    前言: 说到mock,大家会想到单测中的mock,测试同学会想到httpmock服务等. mock的作用:程序运行过程中,设定过滤规则及返回值,来满足固定的数据解析,解决不容易构造或者获取的数据对象. ...

  5. 连接局域网mysql数据库

    1.先确认mysql服务端端口在防火墙是否开放外网连接(添加): windows防火墙 >高级设置 >入站规则 >新建规则 >选择端口 >添加端口 >后面直接下一步 ...

  6. Java面试题准备(掌握)

    1.使用什么方式进行文件上传? 一般使用FormData对象,ajax异步上传. 为什么使用? 1.FormData对象Mozilla上的介绍的,XMLHttpRequest Level 2添加了一个 ...

  7. Windows添加启动项的两种方法

    方案1直接将脚本放到启动文件夹里面 C:\Users\XXX\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup 方案2 Win ...

  8. MATLAB学习(一)数组、变量、表达式、常用简单运算

    >> x=[1 2 3;4 5 6;7 8 9] x = 1 2 3 4 5 6 7 8 9 >> y=[1,2,3] y = 1 2 3 >> y=[1,2,3 ...

  9. SpringMVC,SpringBoot上传文件简洁代码

    @RequestMapping("/updateAvatar.html") public String updateHeadUrl(MultipartFile avatar, Mo ...

  10. Linux命令集锦:crontab命令

    Linux crontab是用来定期执行程序的命令.当安装完成操作系统之后,默认便会启动此任务调度命令.crontab命令每分钟会定期检查是否有要执行的工作,如果有要执行的工作便会自动执行该工作. 而 ...