引用：http://www.css88.com/book/css/properties/user-interface/pointer-events.htm

语法：

pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all

默认值：auto

适用于：所有元素

继承性：有

动画性：否

计算值：指定值

取值：

auto：
与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同
none：
元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
其他值只能应用在SVG上。

说明：

设置或检索在何时成为属性事件的target。

  • 使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）。
  • 对应的脚本特性为pointerEvents。

实例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        a{
            position: absolute;
            top: 0;
            left: 0;
        }
        .front{
            background-color: #c9e2b3;
            z-index: 10;
            width: 100px;
            height: 100px;
            pointer-events: none;
        }
        .back{
            background-color: #f99f9f;
            width: 150px;
            height: 150px;
        }
    </style>
</head>
<body>
    <a class="front" onclick="alert('front!');"></a>
    <a class="back" onclick="alert('back!')"></a>
</body>
</html>

css3 pointer-events 让对象如透明般直接响应下层对象的鼠标事件的更多相关文章

  1. 浏览器 Pointer Events

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

  2. 对象列表转换为DataTable或DataTable转换为对象列表.

    /**********************************************************************************/ // 说明: 数据转换工具. ...

  3. JavaScript学习笔记3之 数组 & arguments（参数对象）& 数字和字符串转换 & innerText/innerHTML & 鼠标事件

    一.Array数组 1.数组初始化(Array属于对象类型) /*关于数组的初始化*/ //1.创建 Array 对象--方法1: var arr1=[]; arr1[0]='aa';//给数组元素赋 ...

  4. 利用StringList对象来管理这些动态生成的对象

    如果程序需要动态创建大量的对象,那么我们可以利用StringList对象来管理这些动态生成的对象.1.创建StringList对象:OBJ := TStringList.Create; 2.保存动态生 ...

  5. JSon_零基础_005_将po（bean）对象集合List转换为JSon格式的对象字符串，返回给界面

    将po(bean)对象集合List转换为JSon格式的对象字符串,返回给界面 导入jar包: 编写:po(bean)代码: package com.west.webcourse.po; /** * 第 ...

  6. python类、对象、方法、属性之类与对象笔记

    python中一切皆为对象,所谓对象:我自己就是一个对象,我玩的电脑就是对象,坐着的椅子就是对象,家里养的小狗也是一个对象...... 我们通过描述属性(特征)和行为来描述一个对象的.比如家里的小狗, ...

  7. （JAVA）从零开始之--对象输入输出流ObjectInputStream、ObjectOutputStream（对象序列化与反序列化）

    对象的输入输出流 : 主要的作用是用于写入对象信息与读取对象信息. 对象信息一旦写到文件上那么对象的信息就可以做到持久化了 对象的输出流: ObjectOutputStream 对象的输入流:  Ob ...

  8. json对象转字符串与json字符串转对象

    1.概述: 我们在编程时进场会遇到json对象转字符串,或者字符串转对象的情况. 2.解决办法: json.parse()方法是将json字符串转成json对象. json.stringfy()方法是 ...

  9. WPF异常“调用线程无法访问此对象,因为另一个线程拥有该对象 ”

    WPF中在对界面进行操作的时候,可能会遇到"调用线程无法访问此对象,因为另一个线程拥有该对象"异常,这是因为WPF中只有UI线程才能操作UI元素,非UI线程要访问UI时就会报异常了 ...

随机推荐

  1. Oauth入门学习

    在一些网站总是看到调用其他网站的信息的实例,比如在人人网中导入MSN联系人,在Facebook中导入gmail,yahoo mail好友,第三方网站不需要总知道你的密码,对于应用的授权完全交给你自己, ...

  2. HDoj-1874-畅通project续-Dijkstra算法

    畅通project续 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  3. [转]mnesia数据库学习笔记

    mnesia数据库学习笔记一 mnesia数据库学习笔记二 mnesia数据库学习笔记三 mnesia数据库学习笔记四

  4. 一种基于uCos-II操作系统和lwIP协议栈的IEEE-1588主站以及基于该主站的报文处理方法

    主站以及应用于电力系统的支持IEEE‐1588协议的主时钟(IEEE‐1588主站)的实现方法.该方法是在一个低成本的硬件平台上,借助uCos‐II操作系统和TCP/IP的协议栈,对以太网数据进行了分 ...

  5. C语言笔试题精选3---死锁发生必要条件是？

    问:以下哪些是死锁发生必要条件? A.相互排斥条件 B.请求和保持 C.不可剥夺 D.循环等待 具体解答: 1.相互排斥使用(资源独占)  一个资源每次仅仅能给一个进程使用 2.不可强占(不可剥夺) ...

  6. React中的state与props的再理解

    props可以看做是 property 的缩写的复数,可以翻译为属性,类似于HTML 标签的自定义属性.在大多数React教程里讲 state 和 props 主要的区别在于 props 是不可变的, ...

  7. C# 反射调用私有事件

    原文:C# 反射调用私有事件 在 C# 反射调用私有事件经常会不知道如何写,本文告诉大家如何调用 假设有 A 类的代码定义了一个私有的事件 class A { private event EventH ...

  8. 西门子S7报文解析

    1.报文的基本格式 1.1 第1和第2个字节是:固定报文头03 00,这里我们就用到三种报文: a.初始化 b. 读 c.写,都是这种格式: 1.2 第3和第4个字节是:整个报文的长度: 其它部分就是 ...

  9. c语言学习笔记（14）——算法

    链表 算法: 1.通俗定义: 解题的方法和步骤 2.狭义定义: 对存储数据的操作 对不同的存储结构,要完成某一个功能所执行的操作是不一样的 比如:要输出数组中所有的元素和输出链表中所有元素的操作是不一 ...

  10. 峰识别 峰面积计算 peak detection peak area 源代码 下载

    原文:峰识别 峰面积计算 peak detection peak area 源代码 下载 Comparative  analysis  of  peak-detection  techniques   ...