• 推荐
  • 评论
  • 收藏

关于<a>的disabled 属性

2022-11-16    5526次浏览

input,textarea,select
都可以使用disabled = “disabled“ 来禁用其功能
而在ie下,当你将a也加入disabled = “disabled “的时候,ie虽然会将链接显示为灰色,看起来貌似已经禁用了,但是如果点击的话会发现依然可以实现跳转,而在其他的浏览器中,链接则不会做任何的改变。
这是为啥捏?难道 disabled = “disabled“ 对 a 无效吗?

实际上 a 标签根本就米有 disabled = “disabled“这个属性, 也就是说这个标签设计之初就没有考虑过要像input那样可以禁用,只不过是ie自做多情了一小把。但是实际情况是,ie下的状态反而是我们所期待的,我们希望能够在某些情况下禁用a标签,而且它是灰色的。
所以也许我们应该在reset。css里面加入一句
a[disabled="disabled"]
{
    color:#989898;
}
让其他的现代浏览器迁就一下ie吧

样式的统一只是一小步,我们还需要在
disabled = “disabled“之后,a标签不再进行任何跳转
所以,一段js如下

function resetBrowser()
{     
    bindEvent(window,DisabledLink,"load");    
    function bindEvent(obj,func,e)
    {
        obj.addEventListener ?
        obj.addEventListener(e,func,false) :
        obj.attachEvent("on"+e,func);        
    }
    function DisabledLink()
    {    
        var elements = document.getElementsByTagName("a") ,            
            temp = null ,
            count = elements.length ,
            returnFunc = function(){ return false;}
        for(var i; i < count ; i++)
        {        
            temp = elements[i] ;                
            if(temp.getAttribute("disabled") == “
disabled”)
            {
                temp.onclick = returnFunc ;                
            }    
        }
    }
}
resetBrowser();

因为绑定了window.onload,所以这段代码可以放在页面的任何地方运行。这样的话,就基本实现了禁用a的功能。

注:我没试过!有时间 研究下

原文地址:https://www.cnblogs.com/Leo_wl/p/2007070.html