引用：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. 通过rinetd实现port转发来訪问内网的服务

    一.   问题描写叙述 通过外网来訪问内网的服务 二.   环境要求 须要有一台能够外网訪问的机器做port映射.通过数据包转发来实现外部訪问阿里云的内网服务 三.   操作方法 做port映射的方案 ...

  2. Linux中vim中出现H不能正常编辑的问题

    使用Linux中,由于是远程操作,我使用crt,由于有的文档有乱码,我就设置了一下session的字符... vim出现问题,下方出现H,导致不能正常编辑... 耗费一下午的时间,在高人的指点之下,终 ...

  3. （翻译）2016美国数学建模MCM E题(环境)翻译:我们朝向一个干旱的星球？

    PROBLEM E: Are we heading towards a thirsty planet? Will the world run out of clean water? According ...

  4. Mac 开发PhoneGap 应用，怎样加入插件 barcodescaner

    搞了两天,最终悟出来了 PhoneGap 与 Cordova 的关系了,有人说是WebKit 与 Chrome 的关系,但我个人理解,两个东西再干一件事情,另外 PhoneGap 被Apache 收购 ...

  5. Windows下MinGW跨平台编译和使用log4cpp

    Log4cpp 是C++开源日志库,为 C++ 应用程序开发中提供了日志的追踪和调试功能,基于 LGPL 开源协议,移植自 java 的日志项目 log4j, 并在 api 上保持了一致性. 1. 环 ...

  6. 《Java并发编程实战》第十二章 测试并发程序 读书笔记

    并发测试分为两类:安全性测试(无论错误的行为不会发生)而活性测试(会发生). 安全測试 - 通常採用測试不变性条件的形式,即推断某个类的行为是否与其它规范保持一致. 活跃性測试 - 包含进展測试和无进 ...

  7. STL序列容器之deque

    一,deque的基础知识 1.deque的基础 deque是“double-ended-queue”的缩写,意思是双端队列,其和vector的区别在于vector是单端的. deque在头部和尾部插入 ...

  8. Android--在Android应用中愉快地写C/C++代码(转)

    1 前言 一直想在android层面写c进程,然后java可以与c进程交互,以前在android源码中想玩就可以直接在init.rc中加上交叉编译好的c进程就可以了,而在ide中,也就是ndk编译后各 ...

  9. 使用 Microsoft.UI.Xaml 解决 UWP 控件和对老版本 Windows 10 的兼容性问题

    原文 使用 Microsoft.UI.Xaml 解决 UWP 控件和对老版本 Windows 10 的兼容性问题 虽然微软宣称 Windows 10 将是最后一个 Windows 版本,但由于年代跨越 ...

  10. C++第11周(春)项目4 - 类族的设计

    课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759,内有完整教学方案及资源链接 [项目4 - 类族的设计]按下面的提示,由基类 ...