脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 超链接 Disabled

超链接的禁用属性Disabled使用示例

 更新时间：2014年07月31日 10:41:31   投稿：whsnow  
可以设置超链接的Disabled属性的true 和 false来确定超链接是不是能点击，下面有个示例，大家不妨参考下

可以设置超链接的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>
您可能感兴趣的文章:

相关文章

  • 用js实现简单的tab选项卡

    用js实现简单的tab选项卡

    这篇文章主要为大家详细介绍了用js实现简单的tab选项卡，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • BootStrap实现鼠标悬停下拉列表功能

    BootStrap实现鼠标悬停下拉列表功能

    这篇文章主要介绍了BootStrap实现鼠标悬停下拉列表功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-02-02
  • 详解weex默认webpack.config.js改造

    详解weex默认webpack.config.js改造

    本篇文章主要介绍了详解weex默认webpack.config.js改造，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • js实现适配移动端的拖动效果

    js实现适配移动端的拖动效果

    这篇文章主要为大家详细介绍了js实现适配移动端的拖动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JS 循环li添加点击事件 （闭包的应用）

    JS 循环li添加点击事件 （闭包的应用）

    这篇文章主要介绍了js循环li添加点击事件 （闭包的应用）的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-12-12
  • Uniapp实现下拉刷新的三种方式

    Uniapp实现下拉刷新的三种方式

    在小程序、h5等地方中,常常会用到下拉刷新这个功能,今天来讲解实现这个功能的三种方式：全局下拉刷新,组件局部下拉刷新,嵌套组件下拉刷新,,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
    2025-02-02
  • JavaScript实现弹出子窗口并传值给父窗口

    JavaScript实现弹出子窗口并传值给父窗口

    这篇文章主要介绍了JavaScript实现弹出子窗口并传值给父窗口,方法很简单，这里推荐给大家，需要的朋友可以参考下
    2014-12-12
  • 微信小程序用canvas画图并分享

    微信小程序用canvas画图并分享

    这篇文章主要为大家详细介绍了微信小程序用canvas画图，并实现分享功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • javascript之卸载鼠标事件的代码

    javascript之卸载鼠标事件的代码

    javascript之卸载鼠标事件的代码...
    2007-05-05
  • onkeypress字符按键兼容所有浏览器使用介绍

    onkeypress字符按键兼容所有浏览器使用介绍

    使用onkeypress字符按键兼容所有浏览器，感兴趣的朋友可以参考下，希望对你学习js事件有所帮助
    2013-04-04

最新评论