为超链接加上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类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
JavaScript作用域链示例分享
May 27 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
原生JS封装vue Tab切换效果
Apr 28 Vue.js
pnpm对npm及yarn降维打击详解
Aug 05 Javascript
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
用缓存实现静态页面的测试
2006/12/06 PHP
PHP sprintf()函数用例解析
2011/05/18 PHP
PHP仿盗链代码
2012/06/03 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
js性能优化技巧
2015/11/29 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
python 内置函数filter
2017/06/01 Python
Python探索之SocketServer详解
2017/10/28 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
django框架forms组件用法实例详解
2019/12/10 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
基于Python实现简单学生管理系统
2020/07/24 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
销售自荐信
2013/10/22 职场文书
校运会口号
2014/06/18 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
学校食堂管理制度
2015/08/04 职场文书
社区服务理念口号
2015/12/25 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书