最近在测试项目注册用户获取验证码的时候发现一个关于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的时候:元素不在是鼠标事件的目标,鼠标不在监听当前层而去监听下面的层中的元素。但是如果他的子元素设置了