超链接的禁用属性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对象模型-执行模型
Apr 28 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
表单验证的完整应用案例探讨
Mar 29 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
js实现简单的验证码
Dec 25 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
el-select数据过多懒加载的解决(loadmore)
May 29 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
分享php邮件管理器源码
2016/01/06 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
pyenv命令管理多个Python版本
2017/03/26 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
django ajax json的实例代码
2018/05/29 Python
在python 中实现运行多条shell命令
2019/01/07 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
UML设计模式笔试题
2014/06/07 面试题
高中校园广播稿
2014/10/21 职场文书
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android