超链接的禁用属性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 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
两个比较有用的Javascript工具函数代码
Feb 17 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 Javascript
5个实用的JavaScript新特性
Jun 16 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
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
Python中优化NumPy包使用性能的教程
2015/04/23 Python
python实现web方式logview的方法
2015/08/10 Python
python之Socket网络编程详解
2016/09/29 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
Python3运算符常见用法分析
2020/02/14 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
python判断元素是否存在的实例方法
2020/09/24 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
专营店会计助理岗位职责
2013/11/29 职场文书
促销活动总结报告
2014/04/26 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
初一语文教学反思
2016/03/03 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书