引用：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. 【hdu 3951】Coin Game

    Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...

  2. Quartz2D常见图形的绘制：线条、多边形、圆

    UI高级 Quartz2D http://ios.itcast.cn  iOS学院 掌握 drawRect:方法的使用 常见图形的绘制:线条.多边形.圆 绘图状态的设置:文字颜色.线宽等 图形上下文状 ...

  3. 回顾Oracle几个用到的基本语句

    create table t_name(id number,name varchar2(10)); drop table t_name; select * from table_name where ...

  4. Eclipse使用异常——tomcat启动

    Eclipse使用异常--tomcat启动 一:问题描写叙述 Eclipse刚上手.非常多地方与Myeclipse不一样的地方.比方tomcat的使用.真心的蛋疼. 环境:JDK7.TOMCAT7.E ...

  5. 在C++ Builder6上使用Boost正则表达式库

    本文关键词:正则表达式 c++ python 软件 正则表达式是一种模式匹配形式,它通常用在处理的文本程序中.比如我们经常使用的grep工具,还是perl语言都使用了正则表达式. 正则表达式是一种模式 ...

  6. 【18.40%】【codeforces 631D】Messenger

    time limit per test 2 seconds memory limit per test 512 megabytes input standard input output standa ...

  7. 【64.22%】【codefoces round 382A】Ostap and Grasshopper

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  8. 关于J2SE/Jsp/Sping/Hibernate/Struts2的视频下载

    我是一名程序猿,从大学就開始学计算机.后来參加了编程工作.如今我认为若要做一名程序猿须要具备三个条件,这三个条件也是衡量一个人能否够成为程序猿的条件. 1.对计算机拥有浓厚的兴趣. 2.良好的逻辑思维 ...

  9. PL/SQL Developer跑在Oracle 64位数据库上初始化错误

    安装完Oracle(64位).PL/SQL Developer后执行PL/SQL出现例如以下的错误: 网上查资料说,我的PL/SQL Developer与ORACLE不兼容,即PL/SQL不支持64位 ...

  10. 机房收费系统vb.net之打包与部署（一）

    从机房重构到如今,我最大的感受就是万事开头难,万事结尾难!开头难是由于那个思路理不清,对三层已经设计模式的应用不够熟悉,结尾难就是打包部署了!这几天非常头疼,以为完毕了代码就大功告成了,但是没想到啊, ...