超链接的禁用属性Disabled使用示例


Posted in Javascript onJuly 31, 2014

可以设置超链接的Disabled属性的true 和 false来确定超链接是不是能点击

例如:

<a herf='http://www.baidu.com' onclick='return click(this);' disabled='ture'>bai du</a>

上面的意思是不想让bai du的超链生效,但在click不做任何约束和判断的话,但点击bai du的时候自然就会跳转到百度页面,这就是html中超链接禁用属性的bug
可以添加下面js约束来判断超链接是否可以使用 

<script language='javascript'> 
function click(obj) 
{ 
if(obj.disabled) 
{ 
return false; 
} 
return ture; 
} 
</script>

下面的微软给出的bug解决方案:

借助了全局变量,使用别的按钮来改变disabled的属性,来得到禁用属性的效果.;

BUG: DISABLED 属性不在禁用超链接
尽管 DISABLED 属性设置为 True 一个超链接为在以下,
<a DISABLED="true" href="http://www.microsoft.com/" rel="external nofollow" rel="external nofollow" >Where do you want to go today?</a>
用户仍可以单击超链接,然后 Internet Explorer 导航到所选页。

若要解决此问题,设置返回 true 或 false 根据当前的执行上下文的超链接的 onclick 事件。 在下面的代码将全局的 Microsoft JScript 变量的值设置为 true 或 false ,根据按钮单击中。 目标超链接对象的 DISABLED 属性被更新,以便它能够正确通信其禁用的状态,其他对象并编写脚本页上的功能。

<html> 
<head> 
<title>Workaround for DISABLED Attribute Problem</title> 
<SCRIPT> 
var canNav = false; 
function canNavigate() { 
return canNav; 
} 
function load() { 
document.all("btn1").innerText = "Link status == " + canNav; 
} 

function setNavigate(linkObj, canNavParam) { 
if (linkObj != null) { 
if (canNavParam == false) { 
linkObj.disabled = true; 
} else { 
linkObj.disabled = false; 
} 
canNav = canNavParam; 
} 
} 

function updateBtnStatus(btnName) { 
var btn = document.all(btnName); 
if (btn != null) { 
document.all(btnName).innerText = "Link status == " + canNav; 
} 
} 
</SCRIPT> 

</head> 
<body onload="load();"> 
<a id="lnk1" disabled=true href="http://www.microsoft.com/" rel="external nofollow" rel="external nofollow" onclick="return canNavigate();">Click here</a><p> 
<button id=btn1 onclick="setNavigate(document.all('lnk1'), !(canNav));updateBtnStatus('btn1');"> 
</button> 
</body> 
</html>
Javascript 相关文章推荐
jQuery 页面 Mask实现代码
Jan 09 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
微信小程序实现选项卡滑动切换
Oct 22 Javascript
vue路由实现登录拦截
Mar 24 Vue.js
Windows 系统下安装和部署Egret的开发环境
Jul 31 #Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 #Javascript
javascript函数中参数传递问题示例探讨
Jul 31 #Javascript
JavaScript数值转换的三种方式总结
Jul 31 #Javascript
new Date()问题在ie8下面的处理方法
Jul 31 #Javascript
JS数组的遍历方式for循环与for...in
Jul 31 #Javascript
js中回调函数的学习笔记
Jul 31 #Javascript
You might like
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Django返回json数据用法示例
2016/09/18 Python
python cs架构实现简单文件传输
2020/03/20 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
Python中SQLite如何使用
2020/05/27 Python
Python爬取梨视频的示例
2021/01/29 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
公司员工的自我评价范例
2013/11/01 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
村干部任职承诺书
2015/01/21 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
担保书格式范文
2015/09/22 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis