為超鏈接加上disabled后的故事

2019-11-21 00:03:02

字體：大中小

供稿：網(wǎng)友

場(chǎng)情：
　　一張頁(yè)面中原來(lái)有一個(gè)超鏈接按鈕，點(diǎn)擊后可以獲取到短信認(rèn)證碼。如

 
<a href="javascript:reciverSms()">獲取短信認(rèn)證碼</a> 
<script type="text/javascript"> 
function reciverSms(){ 
var sms = getSmsCode(); 
} 
</script> 

但是考慮到頻繁點(diǎn)擊獲取認(rèn)證碼，對(duì)相關(guān)設(shè)備的壓力，就做了一個(gè)點(diǎn)擊5秒后才允許再點(diǎn)擊的邏輯，于是又來(lái)了下一個(gè)版本

復(fù)制代碼代碼如下:

 
function reciverSms(obj){ 
var sms = getSmsCode(); 
obj.disabled = true; 
windows.setTimeout(function(){ 
obj.disabled = false; 
},5000); 
} 

代碼邏輯很簡(jiǎn)單，獲取一次短信后，鏈接禁用5秒。可是沒(méi)有想的事情又來(lái)了，原來(lái)超鏈接禁用了后雖然樣子變成禁用了，但是還是可以點(diǎn)擊的，原來(lái)是個(gè)陷阱，于是又來(lái)了第三個(gè)版本

復(fù)制代碼代碼如下:

 
function reciverSms(obj){ 
if(obj.disabled){ 
return; 
} 
var sms = getSmsCode(); 
obj.disabled = true; 
windows.setTimeout(function(){ 
obj.disabled = false; 
},5000); 
} 

至此這個(gè)功能因該是算做好了，可是還有一件令我想不的事，之前說(shuō)超連接disabled屬性為true時(shí)，表現(xiàn)出來(lái)的樣子是灰色不可用狀態(tài)，但這里有個(gè)特例，如果這個(gè)超鏈接被設(shè)置了

color的css屬性樣式，在非ie瀏覽器上表現(xiàn)出來(lái)的樣子就不是禁用了，終于看到ie的好了。于是第四個(gè)版本出現(xiàn)了。

復(fù)制代碼代碼如下:

 
function reciverSms(obj){ 
if(obj.disabled){ 
return; 
} 
var sms = getSmsCode(); 
obj.disabled = true; 
addClass(obj,"gray"); 
windows.setTimeout(function(){ 
obj.disabled = false; 
removeClass(obj,"gray"); 
},5000); 
} 

通過(guò)一步步的改進(jìn)，一個(gè)芝麻功能終于完成了。例子雖小，但卻給了我很多思考。

上一篇：DIY jquery plugin - tabs標(biāo)簽切換實(shí)現(xiàn)代碼

下一篇：input按鈕的事件處理大全