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

 


  • 2018-10-30 00:16:41

    android ToolBar 设置颜色

    app:popupTheme——有时候我们有需求:ActionBar文字是白的,ActionBar Overflow弹出的是白底黑字让ActionBar文字是白的,那么对应的theme肯定是Dark。可是让ActionBar弹出的是白底黑字,那么需要Light主题。这时候popupTheme就派上用场了。android:theme 与app:theme——在AppCompat v21里,提供了一个快速方便的方法设置Toolbar的主题,使用app:theme。而新版本22.1.x中,AppCompat 允许对 Toolbar 使用 android:theme代替 app:theme。最好的一点是:它会自动继承父视图的theme ,并且兼容所有APIv11以上的设备。

  • 2018-11-01 22:08:19

    Android Toolbar左、中、右对齐

    默认的Android Toolbar中添加子元素view是从左到右依次添加。需要注意的是,Android Toolbar为自身的NavigationIcon(app:navigationIcon)最靠右,Logo(app:logo)紧接NavigationIcon、Title(app:title)接续Logo、保留了默认的位置(从左边到右)。这些Android Toolbar保留的系统设置字段将挤压开发者自己安放在Toolbar中的子view,如图所示:

  • 2018-11-06 06:42:59

    XUtils3框架数据库的基本使用方法

    今天给大家带来数据库模块的讲解,现在主流的ORM框架很多,比如OrmLite,GreenDao,Active Android,Realm等等,这些框架每个都有自己的优点和缺点,大家完全可以根据自己项目的实际需求进行选择,下面开始进入今天的数据库模块的介绍。