在我的记忆中pointer-events就是用来进行事件穿透的，也就是说，如果给父元素设置了pointer-events:none，那么父元素不再监听鼠标事件事件(类似于touch,click这样的)。

需要这样做的情况，通常是我们想“穿透”父层，直接点击子元素时，父元素会当作什么也没有发生一样。这是我以前的知识体系中所收集的信息。现在看来也没有错，只是这不完整。

它是有副作用的，或者说，上面的知识应用是有条件的。当我们在属于父子关系的元素上应用这个（pointer-events:none）属性，确实是这个行为，但是如果当我们作用在平行层的两个块元素上的时候，它还是这样子吗？

这个问题就是由上面这个截图所示的应用所引出的。我稍后在给出简化的原型。先简单介绍一下这个场景演示的问题。上图其实是有四个层的：

作为页面容器的page层以及page下面的花花草草所组成的子层，为了后面的演示方便，取名为pagesub层。

另一层是用来进行左右翻页的按钮层，这一层和page层是并列的，取名为float层，因为看起来像是浮在page上面。float层下面有一个叫floatsub层，用来包装小蘑菇按钮。

我希望点击小蘑菇的时候，不会触发float层上的事件，于是我给float层加上了pointer-events:none；那么问题来了，现在我点小蘑茹没有反应。经过监听，发现点到的是page里边的花花草草层。我百思不得其姐，经过一翻激烈的追求，终于得到真爱。下面我就公布这一充满曲折的求姐过程：

pagesub是page的子元素，floatpage是float 的子元素，它们的位置关系如上图所示。其中绿色的page就是页面层，蓝色的pagesub就是花花草草层。红色的float就是按钮层

灰色的float page就是蘑菇层。(色盲的朋友看文字就好了)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        body {

            text-align: center;

        }

         .page {

             position: absolute;

             top : 0;

             left:0;

            height: 400px;

            background-color: green;

             width:500px;

             z-index: 2;

         }

         .float {

             width: 400px;

             height: 200px;

             position: absolute;

             top:50px;

             left: 50px;

            z-index: 3;

            pointer-events:none;

            background-color: red;

         }

         .pagesub {

             width: 90%;

             height: 60%;

             position: absolute;

             top:30px;

             left: 10px;

             z-index: 4;

             background-color: blue;

             color:white;

         }

         .floatsub {

             width:80%;

             height: 60%;

             position: absolute;

            top:33px;

            left:44px;

            background-color: gray;

            z-index: 4;

            color: white;

         }

    </style>

</head>

<body>

<div class="page">

page

    <div class="pagesub">

        pagesub

    </div>

</div>

<div class="float">

float

    <div class="floatsub">

        float page

    </div>

</div>

</body>

</html>

根据上面的源码，在chrome中进行调式，发现，当我在float page（灰色）层查看元素的时候，居然显示是蓝色的pagesub层。简直没有天理了，有图有真相：

但是当我试着把pointer-events这个属性去掉的时候，奇迹出现了，一切回归预期。这是为什么呢？说明pointer-events 会影响绝对定位的层及关系！当然，前提条件是并列关系，而不是父子关系。在并列关系的元素上使用pointer-events，会造成后面的元素被忽视掉。

注意我这里说的“绝对定位的层及关系” 是指看起来像是用了pointer-events:none属性的元素跑到没有用的元素的后面去了，而至于底层是不是真的发生了这样的情况，我没法去证实，但是测试的结果表明就是这样的现象。

除了none之外，顺道提一下pointer-events：的其它几个属性;

  • auto------- 默认值，鼠标不会穿透当前层
  • 针对SVG的： visiblePainted*, visibleFill*, visibleStroke*, visible*,painted*, fill*, stroke*, all*

好了，本次分享就到这里了，发贴辛苦！

关于css中pointer-events属性的怪异行为的更多相关文章

  1. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  2. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  3. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  4. CSS中的display属性

    CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...

  5. 举例详解CSS中的cursor属性

    这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下 一.开篇之言 CSS3的领域范围已经渗透到了 ...

  6. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  7. 理解与应用css中的display属性

    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

  8. css中的列表属性

    list-style-type设定引导列表的符号类型,可以设置多种符号类型,值为disc.circle.square等 list-style-image使用图像作为定制列表的符号 list-style ...

  9. CSS中的!important属性用法

    关于CSS的运用技巧有很多, 今天主要探讨一下CSS中 !important 这个属性的用法.在CSS的使用中,遇到最多的问题就是不同浏览器之间的兼容问题. 由于IE并不严格执行W3C标准, 而又几乎 ...

  10. CSS中的display属性（none,block,inline,inline-block,inherit）

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

随机推荐

  1. OpenSSL 1.0.2e 3 Dec 2015

    目录: 1,交叉编译openssl 2,win32  vc9 编译 openssl 1,交叉编译openssl [原]交叉编译openssl不修改Makefile的方法 http://blog.chi ...

  2. 安装cocoaPods的详细步骤

    先大概说下安装的步骤: Xcode 这个是开发必须的, HomeBrew RVM Ruby CocoaPods 一.HomeBrew: 打开官网链接:http://brew.sh/index_zh-c ...

  3. CentOS 7 防止端口自动关闭

    tl;dr firewall-cmd --permanent --zone=public --add-port=2888/tcp firewall-cmd --reload #重新载入服务 永久配置f ...

  4. C#编写windows服务

    项目要求: 数据库用有一张表,存放待下载文件的地址,服务需要轮训表将未下载的文件下载下来. 表结构如下: 过程: VS--文件-->新建项目-->windows-->windows服 ...

  5. Ubuntu14.04或16.04下Hadoop及Spark的开发配置

    对于Hadoop和Spark的开发,最常用的还是Eclipse以及Intellij IDEA. 其中,Eclipse是免费开源的,基于Eclipse集成更多框架配置的还有MyEclipse.Intel ...

  6. cxf3.1.4所需jar，大部分都可以从cxf3.1.4的lib包下找到

    asm-.jar commons-beanutils-.jar commons-collections-.jar commons-lang-2.6.jar cxf-core-.jar cxf-rt-b ...

  7. 使用--gc-section编译选项减小程序体积

    本周在给程序添加功能的时候,突然发现,我只是写了几个函数,还没调用,size就变大了.这肯定是不行的嘛,没用的函数就应该不链接进来,占用我宝贵的空间. 这种功能,讲道理编译器肯定要支持的,于是搜了一下 ...

  8. Linux下如何自己编译源代码（制作成可以安装的.deb文件）

    以tree实用程序(以树型结构获取目录树)为例,介绍Ubuntu中如何管理源码包,包括查询,获取,编译源码包,直至安装.   1) 在获取源码包之前,确保在软件源配置文件/etc/apt/source ...

  9. C#_技巧：真伪随机数

    使用 Random 产生随机数.(这是一种伪随机数,需要seed,同一个seed后,采用某种算法产生的数字序列都是一样的) 两种写法 错误 for(int i=0;i<100;i++) {    ...

  10. WiFi流量劫持—— JS脚本缓存投毒

    在上一篇<WiFi流量劫持—— 浏览任意页面即可中毒>构思了一个时光机原型,让我们的脚本通过HTTP缓存机制,在未来的某个时刻被执行,因此我们可以实现超大范围的入侵了. 基于此原理,我们用 ...