超链接的禁用属性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 自动安装exe程序
Nov 30 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
javascript实现完美拖拽效果
May 06 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
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
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
js 操作符实例代码
2009/10/24 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
《Python学习手册》学习总结
2018/01/17 Python
NumPy排序的实现
2020/01/21 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
Python 发送邮件方法总结
2020/08/10 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
python xlsxwriter模块的使用
2020/12/24 Python
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
师德师风的心得体会
2014/09/02 职场文书
2014年护理部工作总结
2014/11/14 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
php双向队列实例讲解
2021/11/17 PHP
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL