为超链接加上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 相关文章推荐
javascript下IE与FF兼容函数收集
Sep 17 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
vue prop传值类型检验方式
Jul 30 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
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
JavaScript 乱码问题
2009/08/06 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
python实现坦克大战
2020/04/24 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
成人大专生实习期的自我评价
2013/10/02 职场文书
关于爱情的广播稿
2014/01/16 职场文书
社区庆中秋节活动方案
2014/02/07 职场文书
英语求职信范文
2014/05/23 职场文书
心得体会的写法
2014/09/05 职场文书
小学中等生评语
2014/12/29 职场文书
党员转正申请报告
2015/05/15 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
Python标准库之typing的用法(类型标注)
2021/06/02 Python
Python实现照片卡通化
2021/12/06 Python