为超链接加上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 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
jquery 图片预加载 自动等比例缩放插件
Dec 25 Javascript
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
理解Javascript闭包
Nov 01 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
ES6关于Promise的用法详解
May 07 Javascript
javascript实现贪吃蛇小游戏
Jul 28 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
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
浅谈PHP的反射机制
2016/12/15 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
JavaScript window.location对象
2014/11/14 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
jQuery中库的引用方法
2018/01/06 jQuery
Vue SSR 组件加载问题
2018/05/02 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
JS实现手风琴特效
2020/11/08 Javascript
python中as用法实例分析
2015/04/30 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
Django框架请求生命周期实现原理
2020/11/13 Python
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
2014年实习班主任工作总结
2014/11/08 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
详解MySQL集群搭建
2021/05/26 MySQL