在我的记忆中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. About_全在里面

    分享·地址:http://www.itxueyuan.org/view/6254.html

  2. [转]关于SVN的操作批处理示例

    为了一句话:不要动手做机器能够做的事情. 天天工作用svn,更新啥的打开目录啥的动作天天在重复.每次写些命令也蛮无聊的,不说了,看下面: @echo off rem 显示部分 @echo 注 意 事 ...

  3. Android :fragment介绍

    一.关于Fragmemt 1.Fragment(片段),主要是为了支持更多的动态和灵活的用户界面设计,如平板电脑.Fragment允许组合和交换用户界面组件,而不需要更改视图层次结构.通过把Activ ...

  4. <!DOCTYPE html>很重要

    噩梦开始的源头:之前写html或者jsp页面,从来不注意doctype的声明,也不太明白doctype的作用.直到最近碰到了一个非常奇葩的 bug:某一个页面在IE7和8,Chrome,ff等下正常, ...

  5. django 在字符串[str(list)]中精确查找

    1.问题描述 1.1表结构 1.2问题 ref_list为id列表的字符串,需要从ref_list中找出包含指定id的数据(eg id=8).如果实用models.objects.filter(ref ...

  6. 浏览器地址栏输入一个URL后回车，将会发生的事情

    浏览器向DNS服务器查找输入URL对应的IP地址. DNS服务器返回网站的IP地址. 浏览器根据IP地址与目标web服务器在80端口上建立TCP连接 浏览器获取请求页面的html代码. 浏览器在显示窗 ...

  7. CSS 页面顶部阴影和给浏览器强制加上滚动条

    /*给浏览器强制加上滚动条*/ html{height: 101%;} /*页面顶部阴影*/ body:before{ content: ""; position: fixed; ...

  8. 享元模式 - Flyweight

    Flyweight(享元模式) 定义 GOF:运用共享技术有效地支持大量细粒度的对象. GOF的定义比较专业化,通俗来说,当你有大量相似的实例时,你把其中相同的实例取出来共享. 例子 在你的游戏场景中 ...

  9. Android课程---序列化与反序列化(转)

    ava序列化与反序列化是什么?为什么需要序列化与反序列化?如何实现Java序列化与反序列化?本文围绕这些问题进行了探讨. 1.Java序列化与反序列化 Java序列化是指把Java对象转换为字节序列的 ...

  10. 系统吞吐量（TPS）、用户并发量、性能测试概念和公式

    分享一个概念: http://www.ha97.com/5095.html