今天咱就说说你们肯定都听说过的 jQuery！这个大法宝能让我们轻松搞定DOM操作和响应用户动作，真是前端开发的不二利器。但得提醒大家，用jQuery处理disabled属性时经常有些小麻烦，搞不好让用户犯迷糊，影响体验！究竟怎么回事？怎么办？接下来咱们一起研究一下希望对您有所启发哟~
HTML元素disabled属性的约束
说的是HTML元素的那个”盲人摸象”似的不能点，其实没什么大不了的，HTML就是这么规定的。要是你要用jQuery去掉link里的disabled属性让它变回普通的a标签？可惜不行！a标签不就是用来做链接的吗？你要让它失去链接功能的话，那岂不是违背了HTML本来的目的吗？所以，咱们换个方法解决这个小麻烦。
诀窍来了哦～首先记住在CSS中开启这个叫”Pointer-events”的功能，这样就能把链接轻松关闭！
别慌，A标签没法取消都有新方法了！ css3的Pointer-events属性能随心所欲地控制哪个元素响应用户点击。把它设成none，轻轻松松就能搞定！如果遇到老版本浏览器咋办？别怕，用JavaScript轻松解决。只需在需要禁用的链接上加个”disabled”类名，再结合css和javascript，完美搞定！
event.preventDefault();
如果你的浏览器有自带的 pointer-events 属性，那就太棒了。只要用上这货，你的链接立刻失效！没这功能也不用怕，咱可以用 JavaScript 的 preventDefault()函数来搞定。这么设置过后，保证不管啥情况下，你的链接都别想起作用了~
方法二：使用JavaScript来禁用链接
别再只会用CSS控制链接了，其实JavaScript也可以搞定这个！直接在链接上删掉href属性就能让它失效。给大家分享2个简单函数，分别叫disableLink()和enableLink(),加上class=”disabled”会让效果更棒哈~
编写JS禁链功能时，记得留意兼容性和代码质量！能兼容各种浏览器才能用起来舒心，代码也要易于理解才行。
方法三：使用div标签模拟链接
你知道吗？DIV也能弄出链接的样子！只需加一些文本和样式进去，再设置好点击事件侦听，就能搞定。记得要用CSS让字体看起来美美的，加点下划线、箭头神马的，省得出错。别忘了，还得在click事件里使用preventDefault()来防着页面到处跑。
event.preventDefault(); // 执行需要的操作
这个方法用不着a标签，直接用div就行了，效果也很好~而且我们还能自由设计自己喜欢的样式呢～
这个， jQuery 好像关不掉元素属性对？我们试试看 CSS3 的 pointer-events 功能，或者就搞个 JavaScript 代码来模拟超级链接，就是在 div 里也能体验到链接的感觉！不过这几个方法都有利弊，看你咋选主要还是看你需求和兼容性的考虑哈。
评论0