pointer-events 属性用于设置元素是否对鼠标事件做出反应。

CSS 语法

pointer-events: auto|none;

属性值

属性值 描述
auto 默认值,设置该属性链接可以正常点击访问。
none 元素不能对鼠标事件做出反应
initial 设置该属性为它的默认值,查看更多initial
inherit 从父元素继承该属性, 查看更多 inherit
/* 属性值 */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* 只适用于 SVG */
pointer-events: visibleFill; /* 只适用于 SVG */
pointer-events: visibleStroke; /* 只适用于 SVG */
pointer-events: visible; /* 只适用于 SVG */
pointer-events: painted; /* 只适用于 SVG */
pointer-events: fill; /* 只适用于 SVG */
pointer-events: stroke; /* 只适用于 SVG */
pointer-events: all; /* 只适用于 SVG */ /* 全局值 */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

JS代码改变例子:

document.getElementById("div1").style.pointerEvents = "none";

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

  1. CSS之cursor属性

    CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...

  2. 浏览器 Pointer Events

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

  3. CSS Counters 计数属性

    CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...

  4. css 的pointer-events 属性

    1.css 有好多属性,可以让你感觉到不可思议,关键是可以解决一些难以实现的问题,今天遇到一个,就是 point-enevts属性 支持 pointer-events 属性 的浏览器版本 2. 1  ...

  5. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  6. css标签及属性

    css标签及属性 HTML引入CSS的方法 1.嵌入式  <style type = “text/css”>要写的样式</style> 2.外联式  <link rel ...

  7. CSS样式常用属性整理

    web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...

  8. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

  9. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  10. 利用CSS的@font-face属性 在网页中嵌入字体

    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

随机推荐

  1. MySQL 常用命令(3)------表基本操作

    五.表的基本操作 1.创建表 语法:create table <表名> ( <字段名1> <类型1> [,..<字段名n> <类型n>]); ...

  2. Python3之并发(四)---线程锁

    一.线程锁 保证多线程数据的一致性,对锁内的资源进行锁定,同一时间只能有一个线程来修改共享的数据多个线程同时加了同一个锁对象时,先获取到锁的线程会继续运行,未获取到锁的线程会处于堵塞状态,直到前面的线 ...

  3. 移动端唤起QQ聊天

    var u = navigator.userAgent; var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if(isiOS){ if(u ...

  4. 微信字体大小调整导致的H5页面错乱问题处理

    当用户调整微信字体大小时会导致H5页面错乱,解决方案如下: ios:在css中加入-webkit-text-size-adjust: 100% !important;   body {   -webk ...

  5. python 实现两个多维数组去重处理

    a = [[1,2,3,4],[5,6,7,8],[11,12,13,14],[23,24,12,11]] b = [[5,6,7,8],[23,24,12,11]] c = [] for i in ...

  6. 数据库负载均衡 happroxy 中间器(Nginx)容器的安装与配置

    docker  镜像中安装haproxy 1.下载并安装haproxy镜像 docker pull happroxy # docker pull haproxy:1.7 2.查看镜像 docker i ...

  7. Flink 中 DataStream 和 DataSet区别

    DataSet与DataStream的区别.使用 DataSet同DataStream从其接口封装.真实计算Operator有很大的差别,Dataset的实现在flink-javamodule中,而D ...

  8. MarkDown初次见面——

    Markdown基础语法 分级标题 n级标题就在前面加n个#即可,但是仅支持到六级标题. 字体 柔骨兔 字体倾斜:左右两边加1个* 柔骨兔 字体加粗:左右两边各自添加2个* 柔骨兔 倾斜加粗:左右两边 ...

  9. Vue3注册全局组件

    1. Vue3全局组件注册 components文件夹下新建index.js文件,统一引入需要注册的组件 import CustomCheck from "./CustomCheck.vue ...

  10. 自动化测试工具selenium的常用定位方法

    定位方法不仅限于这些,我也会随时补充,大家有其他补充或建议可以在评论区一起讨论哦!!!     [打开链接]drive.get("https://www.baidu.com")   ...