直接试用disable不同浏览器及版本的兼容例外多,不建议直接disable超链接.
以下通过调整样式和行为的方式实现上述需求:
定义一个超链接"变成"普通html文本的样式
在某个行为中触发"变灰"
在原链接的事件中加入如果已经有"变灰"的class则直接返回
在另外的行为中恢复"正常"
以下为模拟的代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
/* "变灰"效果*/
.disableHref{
cursor:default;
color:#E5E0E0;
text-decoration:none;
}
</style>
<script>
// 禁用超链接-"变灰"
function disableHref(){
var hrefDom = document.getElementById("testHref");
hrefDom.className+=" disableHref";
}
// 启用超链接-"正常"
function enableHref(){
var hrefDom = document.getElementById("testHref");
hrefDom.className=hrefDom.className.replace(" disableHref","");
}
// 超链接点击事件
function hrefClick(){
var target=event.target;
if(target.className.indexOf("disableHref")>-1){
// 加入判断,有"变灰"时返回
return false;
}
// do something u need
// for example
alert("jump previous");
}
</script>
</HEAD>
<BODY>
<a href="javascript:;" id="testHref" onclick="hrefClick()" class="ttt">test href</a>
<input type="button" id="btnDisableHref" onclick="disableHref()" value="Disable href" />
<input type="button" id="btnEnableHref" onclick="enableHref()" value="Enable href" />
</BODY>
</HTML>