超链接的禁用属性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中全局函数each使用介绍
Dec 10 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 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中实现获取随机数组列表的自定义函数
2015/04/02 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
网上抓的一个特效
2007/05/11 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
python中异常报错处理方法汇总
2016/11/20 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
门卫人员岗位职责
2013/12/24 职场文书
大学三年的自我评价
2013/12/25 职场文书
创业计划书中要认真思考的问题
2013/12/28 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
交通安全学习心得体会
2016/01/18 职场文书
关于感恩的作文
2019/08/26 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
导游词之介休绵山
2019/12/31 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
人民币符号
2022/02/17 杂记
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL