超链接的禁用属性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 相关文章推荐
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
javascript简易画板开发
Apr 12 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
原生js实现放大镜
Feb 20 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
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中的三元运算符使用说明
2011/07/03 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
PyMongo安装使用笔记
2015/04/27 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
酒店前厅员工辞职信
2014/01/08 职场文书
模范教师事迹材料
2014/02/10 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
高中军训第一天感言
2014/03/06 职场文书
2014年租房协议书范本
2014/10/30 职场文书
学习党章的体会
2014/11/07 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
Python学习之迭代器详解
2022/04/01 Python