在我的记忆中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. 通读SDWebImage②--视图分类

    本文目录 UIView+WebCacheOperation UIImageView+WebCache.UIImageView+HighlightedWebCache.MKAnnotationView+ ...

  2. Codeforces Round #384 (Div. 2)D-Chloe and pleasant prizes

    D. Chloe and pleasant prizes time limit per test 2 seconds memory limit per test 256 megabytes input ...

  3. ajax教程

    本文来自w3school 简介: AJAX = Asynchronous JavaScript and XML 异步的javascript和xml ajax不是新的编程语言,而是一种使用现有标准的新方 ...

  4. C#_基础：排序算法

    //希尔排序 static int[] ShellSort(int[] array) { if (array != null) { int[] list = { 9, 5, 3, 2, 1 }; fo ...

  5. C#_技巧：.net下C++调用C#的dll

    C#编译一个dll,比如命名空间为Csharp,里面有个类A,字段x,产生一个Csharp.dll C++ 配置,让C++支持CLR C++调用方法: #include <iostream> ...

  6. C#线程入门---转载

    C#中的线程(一)入门 文章系参考转载,英文原文网址请参考:http://www.albahari.com/threading/ 作者 Joseph Albahari,  翻译 Swanky Wu 中 ...

  7. Async IO

    I was recently reading a series on “Write Sequential Non-Blocking IO Code With Fibers in NodeJS” by  ...

  8. io.js入门（一）—— 初识io.js

    io.js可以说是彻底从NodeJS里分离出来的一条分支,其事情始末可以查看这篇报道,此处便也不赘言.既然是分支,io.js便也基本兼容NodeJS的各种API,连执行指令也依旧兼容Node的 nod ...

  9. Nova PhoneGap框架 第七章 设备事件处理

    我们的框架包含了几种设备事件的处理,目的是为了让我们的程序员更容易的完成代码.这些事件包括:回退键(Android)和横竖屏切换事件. 7.1 Android回退键 首先来说说回退键的事件处理.当用户 ...

  10. 让你的站点也支持MarkDown

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式.Markdown的语法简洁明了.学习容易,而且功能比纯文本更强,因此有很多人 ...