在我的记忆中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. 用字符流实现每个文件夹中创建包含所有文件信息的readme.txt

    package com.readme; import java.io.BufferedWriter; import java.io.File; import java.io.FileWriter; i ...

  2. 如何在Windows 2003+IIS6的环境下找回应用程序池(application pool)中的服务账号密码

    上一篇文章说了说如何在Win2008+iis7中取出SharePoint管理账号密码的方法. 整个过程简单的讲,就是通过使用要找回密码的账号用来在SharePoint中创建一个临时的Web Appli ...

  3. IOS远程推送

    IOS远程推送 一.关于推送通知 推送通知,也被叫做远程通知,是在iOS 3.0以后被引入的功能.是当程序没有启动或不在前台运行时,告诉用户有新消息的一种途径,是从外部服务器发送到应用程序上的.一般说 ...

  4. DBImport v3.3 中文版发布：数据库数据互导及文档生成工具（IT人员必备）

    前言: 好久没写文了, 距离上一篇文章是3个月前的事了,虽然工作很忙,主要还是缺少写作的内容和激情,所以没怎么动手. 之前有一个来月不断面试不同层次来应聘的人员,很有想写文的冲动,后来还是忍住了. 估 ...

  5. 业务安全通用解决方案——WAF数据风控

    业务安全通用解决方案——WAF数据风控 作者:南浔@阿里云安全 “你们安全不要阻碍业务发展”.“这个安全策略降低用户体验,影响转化率”——这是甲方企业安全部门经常听到合作团队抱怨.但安全从业者加入公司 ...

  6. Python黑帽编程 2.0 第二章概述

    Python黑帽编程 2.0 第二章概述 于 20世纪80年代末,Guido van Rossum发明了Python,初衷据说是为了打发圣诞节的无趣,1991年首次发布,是ABC语言的继承,同时也是一 ...

  7. Nodejs之MEAN栈开发（三）---- 使用Mongoose创建模型及API

    继续开扒我们的MEAN栈开发之路,前面两节我们学习了Express.Jade引擎并创建了几个静态页面,最后通过Heroku部署了应用. Nodejs之MEAN栈开发(一)---- 路由与控制器 Nod ...

  8. 给Mac OS X的“逻辑宗卷组”改名

    近日更新了Mac OS X的10.10版本——Yosemite,感觉良好,但当我在打开磁盘工具的时候发现了一个美中不足的地方,磁盘宗卷组的名字居然还是我之前的“Mavericks”,如图: 如何对它进 ...

  9. 探索C#之布隆过滤器(Bloom filter)

    阅读目录: 背景介绍 算法原理 误判率 BF改进 总结 背景介绍 Bloom filter(后面简称BF)是Bloom在1970年提出的二进制向量数据结构.通俗来说就是在大数据集合下高效判断某个成员是 ...

  10. 类库间无项目引用时，在编译时拷贝DLL

    例一: xcopy $(TargetPath) $(SolutionDir)\Framework\HCSP.App\bin\Debug /y 例二: xcopy $(TargetPath) $(Sol ...