关于a标签‘’禁止事件触发‘无效问题

最近在测试项目注册用户获取验证码的时候发现一个关于a标签的小bug

目标：点击获取验证码，时间为60s，到0时提示重新获取。

问题：重复点击时显示的时间会随点击次数而改变。

js：

function settime(obj) {
if (countdown == 0) {
$('#res_code_hit').removeAttr("disabled");
$('#res_code_hit').text("重新获取验证码");
countdown = 60;
return
} else {
$('#res_code_hit').attr("disabled", "true");
$('#res_code_hit').text("短信验证(" + countdown + ")");
countdown--
}
setTimeout(function() {
settime(obj)
}, 1000)
}

我们使用的方法是通过增加删除属性disabled来达到目的，发现问题后查阅了相关资料发现，a标签这货不支持属性disabled。卧槽....

解决方法：css：pointer-events：none;

禁止触发 pointer-events：none;

允许触发 pointer-events：auto;

js:

function settime(obj) {
if (countdown == 0) {
$('#res_code_hit').removeAttr("disabled");
$('#res_code_hit').css("pointer-events","auto");
$('#res_code_hit').text("重新获取验证码");
countdown = 60;
return
} else {
$('#res_code_hit').attr("disabled", "true");
$('#res_code_hit').css("pointer-events","none");
$('#res_code_hit').text("短信验证(" + countdown + ")");
countdown--
}
setTimeout(function() {
settime(obj)
}, 1000)
}

讲讲 pointer-events 属性：

值为auto的时候：效果和没有定义pointer-events属性相同；鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。

值为none的时候：元素不在是鼠标事件的目标，鼠标不在监听当前层而去监听下面的层中的元素。但是如果他的子元素设置了