为超链接加上disabled后的故事


Posted in Javascript onDecember 10, 2010

场情:

一张页面中原来有一个超链接按钮,点击后可以获取到短信认证码。如

<a href="javascript:reciverSms()">获取短信认证码</a> 
<script type="text/javascript"> 
function reciverSms(){ 
var sms = getSmsCode(); 
} 
</script>

但是考虑到频繁点击获取认证码,对相关设备的压力,就做了一个点击5秒后才允许再点击的逻辑,于是又来了下一个版本
function reciverSms(obj){ 
var sms = getSmsCode(); 
obj.disabled = true; 
windows.setTimeout(function(){ 
obj.disabled = false; 
},5000); 
}

代码逻辑很简单,获取一次短信后,链接禁用5秒。可是没有想的事情又来了,原来超链接禁用了后虽然样子变成禁用了,但是还是可以点击的,原来是个陷阱,于是又来了第三个版本
function reciverSms(obj){ 
if(obj.disabled){ 
return; 
} 
var sms = getSmsCode(); 
obj.disabled = true; 
windows.setTimeout(function(){ 
obj.disabled = false; 
},5000); 
}

至此这个功能因该是算做好了,可是还有一件令我想不的事,之前说超连接disabled属性为true时,表现出来的样子是灰色不可用状态,但这里有个特例,如果这个超链接被设置了

color的css属性样式,在非ie浏览器上表现出来的样子就不是禁用了,终于看到ie的好了。于是第四个版本出现了。

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); 
}

通过一步步的改进,一个芝麻功能终于完成了。例子虽小,但却给了我很多思考。
Javascript 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
JavaScript 学习笔记(十五)
Jan 28 Javascript
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
input按钮的事件处理大全
Dec 10 #Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 #Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 #Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 #Javascript
Javascript将string类型转换int类型
Dec 09 #Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 #Javascript
web前端开发也需要日志
Dec 09 #Javascript
You might like
用PHP和MySQL保存和输出图片
2006/10/09 PHP
php 缓存函数代码
2008/08/27 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
JSON 数据格式详解
2017/09/13 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
python基础教程之数字处理(math)模块详解
2014/03/25 Python
python实现的简单窗口倒计时界面实例
2015/05/05 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
Python使用django搭建web开发环境
2017/06/09 Python
Python----数据预处理代码实例
2019/03/20 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
中医临床专业自我鉴定范文
2014/01/15 职场文书
财产公证书
2014/04/10 职场文书
教师职位说明书
2014/07/29 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
孝女彩金观后感
2015/06/10 职场文书
白银帝国观后感
2015/06/17 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android