超链接的禁用属性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 相关文章推荐
javascript 伪数组实现方法
Oct 11 Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 Javascript
js实现tab栏切换效果
Aug 02 Javascript
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
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
python简单商城购物车实例代码
2018/03/15 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
python raise的基本使用
2020/09/10 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
华为的Java面试题
2014/03/07 面试题
会计实习生工作总结的自我评价
2013/10/07 职场文书
环境工程大学生自荐信
2013/10/21 职场文书
集团薪酬管理制度
2014/01/13 职场文书
初中生自我评价
2014/02/01 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
离职告别感言
2015/08/04 职场文书
话题作文之成长
2019/12/09 职场文书