超链接的禁用属性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滚轮事件onmousewheel使用介绍
Nov 01 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
vue移动端的左右滑动事件详解
Jun 17 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
php MessagePack介绍
2013/10/06 PHP
php中实现获取随机数组列表的自定义函数
2015/04/02 PHP
PHP网络操作函数汇总
2015/05/18 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
详解python with 上下文管理器
2020/09/02 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
商务日语毕业生自荐信范文
2013/11/14 职场文书
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
教师评优事迹材料
2014/01/10 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
建国大业电影观后感
2015/06/01 职场文书
施工现场安全管理制度
2015/08/05 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
利用python进行数据加载
2021/06/20 Python
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技