为超链接加上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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
jquery中键盘事件小结
Feb 24 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
jquery创建div 实现代码
2009/04/27 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
js实现日期级联效果
2014/01/23 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
常见python正则用法的简单实例
2016/06/21 Python
Python编程中类与类的关系详解
2019/08/08 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
怎样让char类型的东西转换成int类型
2013/12/09 面试题
如何现实servlet的单线程模式
2014/08/05 面试题
《祁黄羊》教学反思
2014/04/22 职场文书
大型活动组织方案
2014/05/10 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
内科护士节演讲稿
2014/09/11 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
鲁冰花观后感
2015/06/10 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python