超链接的禁用属性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 相关文章推荐
javascript检查日期格式的函数[比较全]
Oct 17 Javascript
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
js自制图片放大镜功能
Jan 24 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 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
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
php中fsockopen用法实例
2015/01/05 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
教师节宣传方案
2014/05/23 职场文书
抗洪救灾标语
2014/10/08 职场文书
科技活动周标语
2014/10/08 职场文书
春晚观后感
2015/06/11 职场文书
六年级作文之关于梦
2019/10/22 职场文书
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技