禁用a链接

在bootstrap中，a链接 加上 class=".btn" 时，给a链接 disabled 属性 可实现禁用 a 链接（包括 a链接的 onclick事件）

在平时应用 a 链接时，ie8 到 ie11 支持 disabled 属性，且 可以 禁用 a 链接（包括 a链接的 onclick事件）

后经本人各种虐，终于虐出了原因，发现了一个css3 新生属性 pointer-events:none;

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

属性值很多，但我们关注的 只需[none|auto]两个属性值，其他的值都与SVG相关。因此不再我的关注范围内。

其中”auto”的值 就是相当于 没有设置时的值。我们需要留意的只是pointer-events:none而已。

pointer-events:none 看你就知道了，就是鼠标事件none的意思。元素应用了该CSS属性，链接啊，点击啊什么的一切成空。

于是， 你可以这样

<style type="text/css">
.aaa{
    pointer-events:none;
    cursor:not-allowed;
}
</style>
<a href="www.baidu.com" class="aaa">禁用a链接</a> 

在chrome 及firefox 里面的点击事件 禁用了。 但是在ie中，不管ie几都不支持  pointer-events:none;

因此， 要禁用 a 你还需要这样

<a href="www.baidu.com" disabled class="bbb">禁用a链接</a> 

这样 加上 disabled ie8-11 就可以禁用 a 链接了。（ie7 a链接不支持 disabled 属性 ie6 不再本人的考虑范围内）

这样还有个问题就是键盘的Tab 

按 Tab 是可以选中a链接 并执行它的，这个 在 chrome firefox 中可用。

因此，我们要去掉 href 属性，这样 a 标签 就只是一个标签，不再是超链接了，Tab将它等同于普通的 标签，无视了它。

最后我们要这样

<style type="text/css">
.aaa{
    pointer-events:none;
}
</style>
<a disabled class="aaa">禁用a链接</a> 兼容 ie8-11 chrome firefox

还有一个ie7 本人一直觉得这个很有意思，但不知道原因

在ie7里，只要给 a 链接 加一个display: inline-block; 属性，它就支持 a 链接的disabled 属性了。

最后的最后

<style type="text/css">
.aaa{
    pointer-events:none;
    display: inline-block;
}
</style>
<a disabled class="aaa">禁用a链接</a>

总结 ie8-11 中 禁用 a 链接 (链接，事件，Tab) + “disabled”

ie7 中 禁用 a 链接 (链接，事件，Tab) + “disabled” + display:inline-block;

chrome firefox 中 禁用 a 链接 (链接，事件，Tab) pointer-events:none; 去掉 href。

例子：

<style type="text/css">
.aaa{
    pointer-events:none;
}
.bbb{
    display: inline-block;
}


</style>
<a class="aaa">chrome firefox 中禁用</a>
<a href="www.baidu.com" disabled class="bbb">ie7-11中禁用</a>
<a href="www.baidu.com" disabled class="ddd">ie8-11中禁用</a>
<a href="javascript:;" class="ccc">不禁用</a>
<script type="text/javascript">
$(function(){
   $('.aaa').click(function(){
        alert('chrome firefox 中禁用');
   })
   $('.bbb').click(function(){
        alert('ie7-11中禁用');
   })
   $('.ddd').click(function(){
        alert('ie8-11中禁用');
   })
   $('.ccc').click(function(){
        alert('不禁用');
   })
})
</script>