CSS pointer-events

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

1.阻止用户的点击动作产生任何效果,且有穿透效果
2.阻止缺省鼠标指针的显示
3.阻止CSS里的hover和active状态的变化触发事件
4.阻止JavaScript点击动作触发的事件
一条CSS可以做许多事情是不是很神奇,我们在看一下兼容性情况如何。
IE  11+
Firefox  3.6+
Chrome 4.0+
Safari  6.0
Opera  15.0
iOS Safari 6.0
Android Browser 2.1+
Android Chrome 18.0+

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,827评论 1 92
  • 绝对定位元素盖住链接或添加某事件handle的元素后,那么该链接的默认行为(页面跳转)或元素事件将不会被触发。 现...
    何幻阅读 269评论 0 0
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 5,620评论 0 106
  • 临近岁末,却惊闻噩耗。久未谋面的小邵阿姨因肺癌突然离世。阿姨四十出头,眉清目秀,善良端庄。因为是父辈的故交,才被没...
    伽墨阅读 699评论 0 0
  • 2003年读大一的时候,在北戴河留影。 2008年,工作后在北京为史氏兄弟过生日时留影。 2016年,北京收藏家特...
    张新油画阅读 122评论 0 0