CSS的pointer-events属性详细介绍

本篇内容主要讲解“CSS的pointer-events属性详细介绍”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS的pointer-events属性详细介绍”吧!

公司主营业务:网站制作、成都网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出荥经免费做网站回馈大家。

而本文要说的pointer-events的风格更像JavaScript,它能够:

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

一个CSS属性能做所有的这么多事情!

The CSS

这个pointer-events属性有很多可以使用的属性值,但大部分都是针对SVG的:auto, none, visiblePainted*, visibleFill*, visibleStroke*, visible*, painted*, fill*, stroke*, all*, 以及 inherit。其中none值能阻止点击、状态变化和鼠标指针变化:

代码如下:

.disabled { pointer-events: none; }

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

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

测试代码:

代码如下:


下面的这个链接上的 pointer-events属性值是none。点击它们,什么都不会发生。我还在“测试”链接上添加了监听器。如果pointer-events的值是none,对话框就不会弹出来,你可以在console里修改它的值,这样点击后就会弹出对话框!



测试






我第一次注意到pointer-events属性是在Firefox Marketplace网站上,他们拿它来禁止按钮的点击,这样的好处是样式上也得到了控制。当然,不要使用pointer-events来屏蔽一些十分关键的触发动作,因为这个样式可以通过浏览器控制台删除掉!

到此,相信大家对“CSS的pointer-events属性详细介绍”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


网页名称:CSS的pointer-events属性详细介绍
转载来于:http://pwwzsj.com/article/gppsij.html