CSS pointer-events下层元素被点击
作者：dishuipiaoxiang 来源：dishuipiaoxiang 发布时间：2010-04-11 22:31:00
是否曾经有过这样的经历：把一个元素置于另一个元素之上，而希望下面的那个元素成为可点击的？现在，利用css的pointer-events属性即可做到。
CSS pointer-events
Pointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。
将它应用到一个元素
如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面的元素，就像这样：
<style>
.overlay { pointer-events: none; } </style> <div id="overlay" class="overlay"></div>
浏览器支持
到目前为止，Firefox 3.6+、Safari 4 和Google Chrome支持Pointer-events。我觉得Opera和IE肯定会尽快赶上，我不知道它们的计划中是否支持它。
小演示
我将Pointer-events行为的演示放在一起，在那里你可以自己测试它。正如你看到的那样，右边灰色的盒子阻止单击下面的链接。但是，如果你单击checkbox对其禁用Pointer-events。下面链接的click事件将被触发。
演示页完整的代码如下所示：
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8"> <title>CSS pointer events</title> <style> .container { position: relative; width: 370px; font: 15px Verdana, sans-serif; margin: 10px auto; } .overlay { position: absolute; right: 0px; top: 0; width: 40px; height: 40px; background: rgba(0, 0, 0, 0.5); } .pointer-events-none { pointer-events: none; } </style> <script> window.onload = function () { document.getElementById("enable-disable-pointer-events").onclick = function () { document.getElementById("overlay").className = "overlay " + ((this.checked)? "pointer-events-none" : ""); }; }; </script> </head> <body> <div class="container"> <a href="http://twitter.com">Twitter</a>, <a href="http://twitter.com">Twitter</a>, <a href="http://twitter.com">Twitter</a>, <a href="http://twitter.com">Twitter</a>, <a href="http://twitter.com">Twitter</a>, <a href="http://twitter.com">Twitter</a>, <a href="http://twitter.com">Twitter</a>, <a href="http://twitter.com">Twitter</a>, <a href="http://twitter.com">Twitter</a>, <a href="http://twitter.com">Twitter</a>, <a href="http://twitter.com">Twitter</a>, <a href="http://twitter.com">Twitter</a>, <a href="http://twitter.com">Twitter</a>, <a href="http://twitter.com">Twitter</a>, <div id="overlay" class="overlay"></div> <p> <input id="enable-disable-pointer-events" type="checkbox"> <label for="enable-disable-pointer-events">Disable pointer events for grey box</label> </p> </div> </body> </html>
实际的例子
如果你进入Twitter（国内好像不能登录到该网站，如下图所示）的开始页，而且没有登录。在底部你将看到很多列出的标签。在右边的一个元素，有一张褪色的图片覆盖其上产生这样的效果。不幸的是下面的链接无法点击。如果你在css中添加一行代码，就可以了。
现在，如果你需要这种效果，你有了一个非常简单的方法。
原文地址：
http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/#respond
0
投稿猜你喜欢
List:1. 什么叫商品评论？2. 评论体系的存在意义3. 评论体系的现状4. 都有哪些元素5. 该如何设计？6. 评论体系之外1.什么叫- 如果我们希望把一个网站的更新实时发布到另一个网站上，最好的方法是通过 RSS 进行转载。如果只是需要简单的对更新的条目做个提示的话，使用 J
- 这篇论坛文章主要介绍了SQL Server 2005数据库镜像的配置脚本，详细内容请大家参考下文：SQL Server 2005数据库镜像配
- 这个符合设计标准的三 级向上弹出菜单，纯css代码控制，没有使用javascript脚本，绿色环保，呵呵。兼容性应该更好。截图：<!D
- 昨天同事无意又谈起了这个老话题，美工和设计师（视觉）有什么不同？以文字排版设计为例，列了下面两个图来说明，可能会有一些启发， 第一个图应该算
- 数据库操作类的优点优点可以说是非常多了，常见的优点就是便于维护、复用、高效、安全、易扩展。例如PDO支持的数据库类型是非常多的，与mysql
- 除了第一年外，谷歌每年母亲节都会更换主页的logo以向全世界的母亲致敬。虽然2000年和2001年母亲节的logo图片看起来没什么不同，但是
- 首先是最常规的方法：<p id="para" title="cssrain demo!" on
- 为最终用户提供的功能主要由一个HTML文件和两个ASP文件提供，它们负责接受用户的订阅申请以及退出邮件列表申请。 用户的个人信息在图1所示的
- 本文实例介绍了使用javascript来经验表单数据的方法，如：校验是否为英文，校验是否为数字及校验IP地址等： &l
- 文件名：Awa_temp.Class.asp 代码如下:<％ 'Crazy蛙!模板操作类 '作者C
- 现将几种主要情况进行小结： 一、如何输入NULL值 如果不输入null值，当时间为空时，会默认写入"1900-01-01"
- 解决SQL2000最大流水号的两个好方法问：请问怎样才能解决ms serer 2000 最大流水号的问题？答：我可以介绍两种方法给你：方法1
- <style> #L { position:absolute; color:
- 我的朋友没在服务器上设置DSN，可他一样访问数据库，他是怎样做到的？ 其实，只要我们知道数据库文件名(比如Access、Parad
- 你一定很熟悉Youtube了，知道它是一个视频分享网站。是的，youtube目前十分流行，你也许会常常访问。这里有一些关于youtube u
- 从开始认识CSS(DW4)那时起,我就知道了CSS的强大,但从未用CSS排版过,因为我曾经尝试过学习,但感觉太难了而且用DW的表格,所见及所
- 用过软件的朋友都知道，进度条是一个优秀软件的重要组成部分。它的存在能够使用户及时掌握程序的运行进度，确认应用程序正常工作。可是ASP中似乎没
- 摸到她了！青翠的衣衫，奶白的肌肤，捧在手上的感觉真是太好了，心里美滋滋的。《悟透JavaScript》，一本偶然之作，终于成书并出版了。本书
- 关于跨域这个话题，很早就答应过要分享，但是因为懒，一直拖着，直到D2上有人谈起了“完美跨域”。“跨域”应该已经算不上什么难题了，只是提起“完
