超链接的禁用属性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实现的网页颜色代码表全集
Jul 17 Javascript
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
AngularJS表单基本操作
Jan 09 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 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 写文本日志实现代码
2010/05/18 PHP
php长字符串定义方法
2012/07/12 PHP
浅析php学习的路线图
2013/07/10 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
浅析Python中的join()方法的使用
2015/05/19 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
python实现学员管理系统
2019/02/26 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
python实现接口并发测试脚本
2019/06/25 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
求职者简历中的自我评价
2013/10/20 职场文书
中级会计职业生涯规划范文
2014/01/16 职场文书
幼儿教师研修感言
2014/02/12 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
HTTP中的Content-type详解
2022/01/18 HTML / CSS