专栏首页OECOMpointer-events用法

pointer-events用法

近来发现一个新的css属性,它是一个于javascript相关的属性:pointer-events。直译为指针事件,当把值设置为none后,他有如下相关特性。

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

来看一下的都有哪些属性


pointer-events:auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all

默认值:auto

适用于:所有元素

继承性:有

动画性:否

计算值:指定值


使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标,那么指向该元素的任何事件在事件传播过程中都将通过父元素,并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(将会穿过父元素而指向位于其下面的元素)。

对应的脚本特性为pointerEvents

之后来看一下他的具体兼容性,由于是新的css3特性,他对于浏览器的版本要求也是比较高的。

IE

Firefox

Chrome

Safari

Opera

iOS Safari

Android Browser

Android Chrome

11+

3.6+

4.0+

6.0+

15.0+

6.0+

2.1+

18.0+

然后为什么说这个属性非常的实用呢,在许多网站上过节的时候页面最上层会用canvas绘制的雨、雪花,避免这些悬浮物遮挡住页面从而影响鼠标点击,可以使用pointer-events=none属性,让这些上方的canvas不会遮挡鼠标事件,让鼠标事件可以穿透上方的canvas来点击页面

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jQueryUI实现自动完成输入框提示

    在昨天我发表了一个jQueryUI的effect方法,下面我再来给大家介绍一个通过jQueryUI来实现自动完成输入框提示的方法。他需要调用jQuery对象的 ...

    无邪Z
  • 正则表达式符号的应用举例

    在上一篇文章中介绍了正则表达式的匹配字符时所用到的符号所代表的意思。下面我来说一下具体的例子。

    无邪Z
  • Javascript 原型链之原型对象、实例和构造函数三者之间的关系

    首先来说一下名词解释,首先说一下prototype,每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数...

    无邪Z
  • git 发送patch给别人

    用户3765803
  • hasLayout IE浏览器bug的来源

    HTML5学堂:IE6浏览器曾经“坑”了一代又一代的前端工程师,了解浏览器兼容问题的同时,抱着“理科思维”的我们,必然会去思考为何IE6会这么“坑”,所以,我们...

    HTML5学堂
  • 聊聊微信小程序自动化如何来做?

    平常我们使用自动化主要是针对 App 端和 Web 端,另外还有两种场景比较少用但是也很重要,分别是:浏览器、微信小程序。

    AirPython
  • 如何在Debian 9上安装Apache Tomcat 9

    Apache Tomcat是一个Web服务器和servlet容器,用于为Java应用程序提供服务。Tomcat是Apache Software Foundati...

    GeekZ
  • 【Flutter 专题】97 仿网易新闻标签选择器

    和尚前段时间刚学习了 Draggable + DragTarget 实现基本的拖拽效果,现在尝试以此为基础仿照网易新闻客户端实现一个简单的标签选择器...

    阿策
  • nginx动态proxy_pass

    有时我们想根据用户请求的参数转发到不同的upstream,像做多机房用户路由的时候是非常有用的,实现有多种方式,一是设置不同的loction,然后让lua动态执...

    心平气和
  • 使用Maven的父项目,多个子模块来开发Springboot项目,新建的子模块如何和同级的子模块进行依赖

    1、业务场景,使用Maven来构建项目,创建一个父工程,然后创建多个子模块,子模块data-runtime模块作为启动模块,同时将前端界面放到该模块。这里需要注...

    别先生

扫码关注云+社区

领取腾讯云代金券