超链接的禁用属性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 相关文章推荐
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 Javascript
介绍一下28个JS常用数组方法
May 06 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
Terran兵种对照表
2020/03/14 星际争霸
PHP 遍历文件实现代码
2011/05/04 PHP
js动态创建、删除表格示例代码
2013/08/07 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
pyv8学习python和javascript变量进行交互
2013/12/04 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
python实现代码统计器
2019/09/19 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
提升python处理速度原理及方法实例
2019/12/25 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
开学典礼感言
2014/02/16 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
白酒营销策划方案
2014/08/17 职场文书
计划生育证明格式范本
2014/09/12 职场文书
房屋授权委托书范本
2014/10/07 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python