这一节我们来给小伙伴们介绍一个前端的“黑科技”——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秒中，超链接的单击事件是被禁用的。