html.div禁用点击事件

2019-06-10 11:54:52

今天做项目中偶然误把元素加上了pointer-events属性,结果导致后来在js中给该元素加点击事件不能用,检查了半天才发现是这个属性的问题。之前没有好好研究,于是决定仔细研究一下。

一、定义及语法

根据MDN上的解释如下:

CSS属性pointer-events允许作者控制特定的图形元素在何时成为属性事件的target。当未指定该属性时,SVG内容表现如同visiblePainted

除了指定元素不成为鼠标事件的目标,none值还指示鼠标事件穿过该元素,并指向位于元素下面的元素。

初始值auto
适用元素all elements
是否是继承属性yes
适用媒体visual
计算值as specified
是否适用于 CSS 动画
正规顺序the unique non-ambiguous order defined by the formal grammar

 

语法

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

  • auto

  • pointer-events属性未指定时的表现效果相同,对于SVG内容,该值与visiblePainted效果相同

  • none

  • 元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。

  • visiblePainted

  • 只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标: 

    • visibility属性值为visible,且鼠标指针在元素内部,且fill属性指定了none之外的值

    • visibility属性值为visible,鼠标指针在元素边界上,且stroke属性指定了none之外的值

  • visibleFill

  • 只适用于SVG。只有在元素visibility属性值为visible,且鼠标指针在元素内部时,元素才会成为鼠标事件的目标,fill属性的值不影响事件处理。

  • visibleStroke

  • 只适用于SVG。只有在元素visibility属性值为visible,且鼠标指针在元素边界时,元素才会成为鼠标事件的目标,stroke属性的值不影响事件处理。

  • visible

  • 只适用于SVG。只有在元素visibility属性值为visible,且鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标,fillstroke属性的值不影响事件处理。

  • painted

  • 只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标: 

    • 鼠标指针在元素内部,且fill属性指定了none之外的值

    • 鼠标指针在元素边界上,且stroke属性指定了none之外的值

    visibility属性的值不影响事件处理。

  • fill

  • 只适用于SVG。只有鼠标指针在元素内部时,元素才会成为鼠标事件的目标,fillvisibility属性的值不影响事件处理。

  • stroke

  • 只适用于SVG。只有鼠标指针在元素边界上时,元素才会成为鼠标事件的目标,strokevisibility属性的值不影响事件处理。

  • all

  • 只适用于SVG。只有鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标,fillstrokevisibility属性的值不影响事件处理。

 

二、到底什么是pointer-events

pointer-events如上述所言支持的值很多,但大多都与SVG相关,我们可以不用理会。而对于我们来讲,需要注意的就是[none|auto]两个属性值了。“auto”没什么好说的,就是在正常状态下的元素。本文将着重研究一下“none”。

pointer-events:none顾名思意,就是让任何鼠标元素对鼠标事件不起作用,这里的鼠标事件包括css中的hover,同时也会关闭js中的onclick。

 

三、效果

pointer-events:none的作用不只是禁用链接hover,打开链接等效果,是真实意义上的将onlick事件去掉了。但是,他不会关闭键盘时间,比如点击"tab"键会切换<a>标签,设置了pointer-events:none的元素同样有反应。

我们看一下例子:

代码如下:

复制代码

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title></title>     <style>         .none{             pointer-events: none;         }     </style> </head> <body> <a href="#1">auto1</a> <a href="#2">none</a> <a href="#3">auto2</a> </body> </html>

复制代码

 

注:要想真的将元素鼠标和键盘事件都去掉,可以使用:无href + pointer-events:none

 


  • 2020-01-17 08:37:26

    css transition分别指定多个属性

    transition有四个属性,很多人都会遗忘,分别是transition-property,transition-duration,transition-timing-function,transition-delay,尤其是transition-delay,这个可以实现延迟动画

  • 2020-01-17 08:44:57

    vue keepalive 前进刷新后退不刷新终极解决方案

    另外,我们做路由的时候要有意的根据页面等级做出路由的长度 比如 /a是一级的页面/a/b是二级的页面,下面的文章大家也可以通过判断path的长度来计算rank值,不用有意自定了 这样做的好处有两点,一个就是前进刷新,后退不刷新,还有就是,如果我们做页面进出效果的时候也能排上用场。

  • 2020-01-17 15:28:24

    深入理解vue中的slot与slot-scope

    vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率、使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经可以写基础组件了”,于是就关闭了vue说明文档。

  • 2020-01-17 21:20:06

    Nuxt重要点介绍和记录

    nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多页应用,并在服务端完成渲染,可以直接用命令把我们制作的vue项目生成为静态html。

  • 2020-01-17 21:21:42

    nuxtjs打包优化

    然后你再使用 npm run build 打包的时候,会弹出一个界面 当然了,它第一次出来的时候我立马关了,这啥玩意???别着急你慢慢的品,慢慢的看。 原来 这是打包后的JS,面积的大小就是体积的大小。这样我们一目了然的看到了到底那里大了

  • 2020-01-17 23:21:54

    webpack打包优化之外部扩展externals的实际应用

    使用vue-cli创建项目,使用webpack打包。其中,有一个webpack优化webpack.optimize.CommonsChunkPlugin,它会将node_modules中的必需模块提取到vendor文件中,项目开发中,增加第三方模块,比如element-ui、vue-echarts等,vendor的包都会增大。这个时候,就需要考虑减轻vendor包的大小,增加构建速度。我们可以使用webpack的外部扩展(externals)功能。

  • 2020-01-18 01:26:59

    anyProxy使用注意事项

    anyproxy-ca 运行这个命令,如果是mac电脑他会提醒你去通过证书。