前言

最近在开发时遇见一个问题

我们知道a标签的disabled属性部分浏览器支持，但是尽管设置了disabled属性也无法阻挡任何鼠标经过或是点击事件的，那么如何实现a标签按钮的禁用呢?

转换一下思维，设置disabled属性的元素表现为不能点击、无法获得光标焦点，那么我们不用disabled属性实际上也可以达到同样的效果！

实现

方法一：移除点击事件click或touchend

我们可以直接使用jquery：unbind()或者JS：removeEventListener()移除点击事件

方法二：给a标签设置css属性pointer-events:none

pointer-events:none是css3中的属性，表示禁用鼠标事件，这样实际上也是将click事件去掉了！

方法三：移除a标签的href属性

我们可以使用jquery：removerAttr()或者JS：removeAttribute()移除a标签的href属性

注意不能将href属性赋值为空，因为空的a标签会跳转到本页

完美禁用

我们在设置了pointer-events:none后发现元素仍然会被focus到，那么如何解决这个问题呢?

给a标签设置disabled属性虽然不能禁用鼠标事件，但是可以禁用键盘事件！！！

无href + pointer-events:none + disabled = 完美禁用

进一步整理

pointer-events:none & without href = 完美禁用

实现a标签按钮完全禁用的更多相关文章

  1. Qt自定义标签按钮

    当你接触到Qt时,你会为它极为方便的跨平台方面感到吃惊,从而想尝试着使用Qt.渐渐地你会发现Qt自带的一些控件不能满足自己的需要,此时就需要我们自己定义一个属于自己的控件.总所周知,标签的风格设置类比 ...

  2. [移动端WEB] 移动端input标签按钮为什么在苹果手机上还有一层白色？

    移动端input标签按钮为什么在苹果手机上还有一层白色? 解决办法:其实蛮简单的,就加一个属性就好了 input { outline:0px ; -webkit-appearance: none; } ...

  3. a标签 按钮化使用

    a标签 按钮化使用 a href="javascript:void(0);" onclick="js_method()" a href="javasc ...

  4. JS框架_(JQuery.js)带阴影贴纸标签按钮

    百度云盘 传送门 密码:azo6 纯CSS带阴影贴纸标签按钮效果: <!doctype html> <html> <head> <meta charset=& ...

  5. MUI 样式按钮的禁用

    1)如果是button,input等标签,可以     .attr("disabled",true)或者.attr("disabled","disab ...

  6. .net 后台中对html标签按钮跳转后台以及后台简单验证

    ---------------------------------学霸,学神,大牛,hacker请绕道de分割线-------------------------------------------- ...

  7. 【CSS】按钮的禁用与可用 CSS Cursor 属性

    禁用时的样式 可用时的样式 样式很简单,禁用就设置为灰色,可用就设置为红色,今天这个不是重点,重点的是,光标的样子 一般,禁用时候,光标移动到按钮的上方,光标如下 而在启用按钮的时候,光标移动到按钮上 ...

  8. A标签/按钮防止重复提交&页面Loading制作

    [实现原理] 防止重复提交与页面的提交时的Loading设置,均是在提交,但是尚未处理完成进行的操作,且提交为异步提交(同步提交不需要考虑).因此,其实现原理是在点击按钮或A标签时,将按钮/A标签置为 ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：禁用按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. CefGlue获取网页源代码

    1.编写一个CefStringVisitor类: public class MyStringVisitor : CefStringVisitor { private readonly TaskComp ...

  2. C++代码匈牙利命名规范

    一.类 除了异常类等个别情况(不希望用户把该类看作一个普通的.正常的类之情况)外,C++类/结构的命名应该遵循以下准则: C++类的命名    类的名称都要以大写字母“C”开头,后跟一个或多个单词.为 ...

  3. Qt编写自定义控件19-图片背景时钟

    前言 图片背景时钟控件,是全套控件(目前共145个)中唯一的几个贴图的控件,这个背景要是不贴图,会画到猝死,必须用美工做好的图贴图作为背景,此控件以前学C#的时候写过,后面在写Qt控件的过程中把他移植 ...

  4. 根据规则去掉List 对象数组中的重复元素

    package container.main; import java.util.ArrayList; import java.util.Comparator; import java.util.Li ...

  5. Win10上的媒体断开连接错误消息（找不到ip地址）

    使用管理员权限打开命令提示符并执行以下命令: ipconfig /all 这将列出所有连接的媒体,即以太网和Wifi及其状态. 结果全部显示: 媒体断开连接 如下图: 如果是这种情况,我们需要解决互联 ...

  6. MATLAB学习（九）系统聚类

        >> X=rand(100,2); >> Y=pdist(X,'euclidean'); >> Z = linkage(Y,'average'); > ...

  7. 用R语言求置信区间

    用R语言求置信区间 用R语言求置信区间是很方便的,而且很灵活,至少我觉得比spss好多了. 如果你要求的只是95%的置信度的话,那么用一个很简单的命令就可以实现了 首先,输入da=c(你的数据,用英文 ...

  8. C/C++中结构体总结笔记

    结构体的定义方式 在C/C++中结构体的定义方式有很多种,做个简单的总结. 定义方式1: struct st{ int a; }; 定义方式2: struct _st{ int a; } st; 定义 ...

  9. 3.React中的setstate的几个现象

    转载segfault 上面的一篇文章,https://segmentfault.com/a/1190000014498196 1.在同一个方法中多次setState是会被合并的,并且对相同属性的设置只 ...

  10. python基础学习19,01

    听说python入门很容易,所以想试试对我这个零基础会不会很友好呢.做随笔也顺便督促自己不要轻易放弃学习. #登录接口 print("请输入用户名密码") _username = ...