关于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的时候:元素不在是鼠标事件的目标,鼠标不在监听当前层而去监听下面的层中的元素。但是如果他的子元素设置了!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

赞助商

微信扫一扫,分享到朋友圈

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

显示

忘记密码?

显示

显示

获取验证码

Close