pointer-events的风格更像JavaScript，它能够：

1.阻止用户的点击动作产生任何效果
.阻止缺省鼠标指针的显示
3.阻止CSS里的hover和active状态的变化触发事件
4.阻止JavaScript点击动作触发的事件

一些需要注意的关于pointer-events的事项：

1.子元素可以声明pointer-events来解禁父元素的阻止鼠标事件限制。
2.如果你对一个元素设置了click事件监听器，然后你移除了pointer-events样式声明，或把它的值改变为auto，监听器会重新生效。基本上，监听器会遵守pointer-events的设定。

语法：

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。

兼容性：

示例：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <meta charset="utf-8" />

    <style>

        #divTwo {

            background: red;

            width: 100%;

            height: 100%;

            position: fixed;

            z-index: 1;

            top: 0px;

            left: 0px;

            opacity: 0.3;

            /*设置当前元素不参与鼠标事件*/

            pointer-events:none;

        }

    </style>

</head>

<body>

    <div id="divOne">

        <a href="canvas1.html">连接1</a>

        <br /><br />

        <a href="pointer-events.html">连接2</a>

    </div>

    <div id="divTwo"></div>

</body>

</html>

结果：

pointer-events属性的更多相关文章

  1. 浏览器 Pointer Events

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

  2. javascript code snippet -- Forwarding Mouse Events Through Layers

    Anyone who has worked with web apps has likely created a masking element at some point, and the grea ...

  3. ExtJS笔记 Using Events

    Using Events The Components and Classes of Ext JS fire a broad range of events at various points in ...

  4. jQuery1.9.1源码分析--Events模块

    var rformElems = /^(?:input|select|textarea)$/i, rkeyEvent = /^key/, rmouseEvent = /^(?:mouse|contex ...

  5. touch pointer

    在早期的浏览器,输入的事件其实相对单纯,只有考虑到鼠标和键盘两种:而当时的鼠标事件,其实就是 click.mousedown.mouseup 等等的事件.但是当手机.平板开始流行时候,再移动装置上的主 ...

  6. js中对节点属性的操作和对节点的操作

    常用的节点属性操作方法 1.setAttribute(name,value):给某个节点添加一个属性 2.getAttribute(name):获取某个节点属性的值. 3.removeAttribut ...

  7. 浏览器的统一指针事件：Pointer Event

    在早期的浏览器,输入的事件其实相对单纯,只有考虑到鼠标和键盘两种:而当时的鼠标事件,其实就是 click.mousedown.mouseup 等等的事件.但是当手机.平板开始流行时候,再移动装置上的主 ...

  8. 札记：android手势识别，MotionEvent

    摘要 本文是手势识别输入事件处理的完整学习记录.内容包括输入事件InputEvent响应方式,触摸事件MotionEvent的概念和使用,触摸事件的动作分类.多点触摸.根据案例和API分析了触摸手势T ...

  9. jquery触屏幻灯片

    一.前言 去年接触了移动Web开发,做了些手机端的网站及应用,还有些小的微信游戏和活动页面.每个项目里或多或少的都会有一些触屏事件等.其中有两个用到了jquery触屏幻灯片.刚开始的时候也在百度上搜索 ...

  10. VNC常用操作及常见问题解决办法汇总

    VNC登录用户缺省是root,但在安装oracle时必须用oracle用户的身份登录,下面我们就以oracle为例说明如何配置VNC,从而可以使用不同的用户登录到主机.步骤描述如下:    步骤一:修 ...

随机推荐

  1. php 随机显示据今天30天内的任意一天

    function randomDate() { //echo date( "Y-m-d H:m:s", $newtime); //echo date("Y-m-d H:m ...

  2. FCKEditor使用说明

    1.基本设置   先看看效果是什么样的:   效果图: 那么为什么说是FCKeditor的冰冷之心呢?这不是哗众取宠,主要是说它使用起来有点麻烦,下文就详细说明如何搞定这玩意儿. 1.FCKedito ...

  3. 关于几种常用的Adapter使用区别

    Adapter常用的实现类如下: 1.ArrayAdapter:简单.易用的Adapter,通常用于将数组或List集合的多个值包装成多个列表项. 2.SimpleAdapter:并不简单.功能强大的 ...

  4. net Core 使用MyCat分布式数据库，实现读写分离

    net Core 使用MyCat分布式数据库,实现读写分离 目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 MyCat2.0版本很快就发布了,关于MyCat的动态和一些问题, ...

  5. 『GitHub』Git常用命令记录

    Commands: git init 把当前目录变成Git可以管理的仓库 随后出现.git目录,这个目录是Git来跟踪管理版本库的git commit -m "change message& ...

  6. Node.js 入门(2)

    1.http 请求 //调用Node.js自带的http模块 var http = require("http"); //调用http模块提供的函数createServer htt ...

  7. IIS的安装与配置详细图解教程。

    一.这里讲的是在WINDOWS 2003下的IIS组件的安装,至于WINDOWS XP,请看这里:   开始-控制面板-添加或删除程序-添加/删除windows组件   勾选应用程序服务器   勾选I ...

  8. 【Hybrid App】Hybrid App开发 四大主流移平台分析

    转自http://dev.yesky.com/238/34657738.shtml Hybrid App在过去的两年中已经成为移动界的核心话题,但是作为一名Web开发者来说要如何站在移动互联网的浪潮之 ...

  9. 【HDOJ】4982 Goffi and Squary Partition

    题意就是整数划分,选出和为n的K个整数,其中K-1个数的和为完全平方数S.选择整数时需要从1,2,3..连续选择,当选择整数与n-S相等时,需要跳过n-S,即选择n-S+1.如此选择K-2个数,从而可 ...

  10. 信用卡/借记卡充值p2p平台

    第一部分信用卡/借记卡充值 首先信用卡尽量不要用于网贷,因为这样会有风险,对投资人和借款人都不利,况且银行的钱也不是那么好用的,对吧?但是也有很多朋友问我信用卡相关事宜,我在这里专门做个解答,信用卡用 ...