引用：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. CocoaPods停在Analyzing dependencies的解决方案

    解决办法: 1: 换镜像索引库 国内有人建立了cocoapods的索引库镜像,可以通过如下命令更改镜像: pod repo remove master  pod repo add master htt ...

  2. hello.c内核模块编译 -- linux内核

    Linux开发模块,在本机上看调试信息的方法走通了.当前版本号2.6.32-32-generic uname –r 能够查询 这里取module_param()作为样例. 该宏被定义在include/ ...

  3. 【hdu 2376】Average distance

    [题目链接]:http://acm.hdu.edu.cn/showproblem.php?pid=2376 [题意] 让你计算树上任意两点之间的距离的和. [题解] 算出每条边的两端有多少个节点设为n ...

  4. 手机预览微信小程序

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的“设置”-“开发者设置”中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅 ...

  5. 前端构建工具里babel-polyfill的使用问题

    看了很多react工程的package.json文件,里面都没有使用babel-polyfill,那对ES6的新API是如何做到被IE9这样的浏览器识别的呢,难道在webpack打包的时候通过别的方式 ...

  6. Visual Studio for Mac第四预

    微软发布Visual Studio for Mac第四预览版 去年 11 月,微软发布了 Visual Studio for Mac 的首个预览版本,并且承诺后续数月会带来更多功能.而今天,随着 Vi ...

  7. mongoose ObjectId.toString()

    node中一般我们经常对id进行判断,有的id是string类型,有的是ObjectId(''),这时候就可以使用mongoose的toString方法,将它转换成string

  8. mongose TypeError: Cannot read property 'findOne' of undefined

    最近在node的一个项目中,需要在model的一个数据表中写一个钩子函数去调用另外一个文件中的方法,一开始我采用了将此方法放入到global中,直接从global.meteod这样去获取.后来我又尝试 ...

  9. phpstudy2018升级MySQL5.5为5.7.24教程(图文)

    原文: phpstudy2018升级MySQL5.5为5.7教程(图文) 一.MySQL官网下载MySQL5.7版本,我这里下载的是MySQL5.7.24. 二.直接到D:phpStudyPHPTut ...

  10. WPF UserControl 的绑定事件、属性、附加属性

    原文:WPF UserControl 的绑定事件.属性.附加属性 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Vblegend_2013/arti ...