这一节我们来给小伙伴们介绍一个前端的“黑科技”——pointer-events属性。在CSS3中,我们可以使用pointer-events属性来定义元素是否禁用鼠标单击事件。pointer-events属性是一个与JavaScript有关的属性。

语法:

pointer-events: 取值;

说明:

pointer-events属性取值只有2个,如下表所示。

pointer-events属性取值
属性值 说明
auto 不禁用鼠标单击事件(默认值)
none 禁用鼠标单击事件

在实际开发中,我们可以使用pointer-events: none;来禁用元素的鼠标单击事件,比较常见的用法是获取验证码。当用户单击【获取验证码】按钮后,需要等待若干秒才能再次单击【重发验证码】按钮,如下图所示。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .disable { pointer-events: none; color:#666666; } </style> <script> window.onload=function(){ var oA=document.getElementsByTagName("a")[0]; oA.onclick=function(){ this.className="disable"; setTimeout(function () { oA.removeAttribute("class"); },3000); } } </script> </head> <body> <a href="javascript:;">发送验证码</a> </body> </html>

浏览器预览效果如下图所示。

分析:

在上面例子中,当我们点击超链接后,为其添加一个disable的类,然后使用定时器,使得3秒后,去除disable这个类名。在这3秒中,超链接的单击事件是被禁用的。