超链接的禁用属性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 相关文章推荐
匹配任意字符的正则表达式写法
Apr 29 Javascript
无阻塞加载脚本分析[全]
Jan 20 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
Javascript的表单验证长度
Mar 16 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
详解vue-router导航守卫
Jan 19 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 Javascript
JavaScript Array.flat()函数用法解析
Sep 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
PHP框架Laravel的小技巧两则
2015/02/10 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
js实现无缝滚动图
2017/02/22 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python中redis的安装和使用
2016/12/04 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
HTML5实现预览本地图片
2016/02/17 HTML / CSS
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
大家检讨书5000字
2014/02/03 职场文书
七一党日活动总结
2014/07/08 职场文书
离职证明标准格式
2014/09/15 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
调解协议书范本
2016/03/21 职场文书
如何用python插入独创性声明
2021/03/31 Python
java基础——多线程
2021/07/03 Java/Android
mysql事务隔离级别详情
2021/10/24 MySQL
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫