为超链接加上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 showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
尝试在让script的type属性等于text/html
Jan 15 Javascript
ScrollDown的基本操作示例
Jun 09 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
js检验密码强度(低中高)附图
Jun 05 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
快速入门python学习笔记
2017/12/06 Python
Python中Threading用法详解
2017/12/27 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
优秀研究生自我鉴定
2013/12/04 职场文书
承诺书的格式范文
2014/03/28 职场文书
城市创卫标语
2014/06/17 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
同学聚会祝酒词
2015/08/10 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL