引用：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. 前端切图:调用百度地图API

    原型图 图片发自简书App <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  2. Oracle数据库的基本概念（转）

    一.数据库 我们在安装Oracle数据库时,全局数据库名:就是一个数据库的标识,在安装时就要想好,以后一般不修改,修改起来也麻烦,因为数据库一旦安装,数据库名就写进了控制文件,数据库表,很多地方都会用 ...

  3. 检索08- SQL语句中的go与use用法

    GO 1. 作用:向 SQL Server 实用工具发出一批 Transact-SQL 语句结束的信号.2. 语法:一批 Transact-SQL 语句 GO 如 Select 1 Select 2 ...

  4. 执行hdfs namenode -importCheckpoint时出现No image directories available!

    在https://issues.apache.org/jira/browse/HDFS-4705找到了答案需要在hdfs-site.xml中配置 <!--指定fsimage存储目录--> ...

  5. DEA上安装和使用checkstyle,findbugs,visualVM,PMD插件

    ##安装插件步骤: 1.打开settings 2.选择plugins 3.点击"Browse repositories" 4.搜索对应内插件,点击"install&quo ...

  6. VC和matlab混合开发学习

    作者:朱金灿 来源:http://blog.csdn.net/clever101 第一种方式是直接调用Matlab Engine的接口.Matlab Engine 采用Client/Server的方式 ...

  7. Bridge 、 Adapter 和 Facade 的区别

    Bridge和Adapter是没有关系的,而和Facade比较象,但在我的经验中更多的时候是会混淆Bridge和adapter而不是Facade,这里详细的列出三个模式的比较. 一. 定义: 1.Fa ...

  8. git 合并本地分支到远程分支

    第一种方法: git 快速合并本地分支到远程分支1.git branch -a 查看所有分支2.git checkout origin/分支名称3.git checkout 分支名称完成 ------ ...

  9. yii2.0表单《《提交》》变量设置

    public $enableCsrfValidation = false;

  10. 理解 iOS 和 macOS 的内存管理

    在 iOS 和 macOS 应用的开发中,无论是使用 Objective-C 还是使用 swift 都是通过引用计数策略来进行内存管理的,但是在日常开发中80%(这里,我瞎说的,8020 原则嘛