關於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的時候：元素不在是鼠標事件的目標，鼠標不在監聽當前層而去監聽下面的層中的元素。但是如果他的子元素設置了