超链接的禁用属性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 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
js触发onchange事件的方法说明
Mar 08 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
JavaScript RegExp 对象用法详解
Sep 24 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 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
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
比较完整的微信开发php代码
2016/08/02 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
php命令行模式代码实例详解
2021/02/26 PHP
JavaScript DOM 添加事件
2009/02/14 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
python实现RSA加密(解密)算法
2016/02/17 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
Python PO设计模式的具体使用
2019/08/16 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
美容师的职业规划书
2013/12/27 职场文书
学校运动会霸气口号
2014/06/07 职场文书
质量整改报告范文
2014/11/08 职场文书
《法国号》教学反思
2016/02/22 职场文书