前言

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

我们知道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. ubuntu19.04 安装workbench

    1.首先下载安装这两个包: https://packages.ubuntu.com/cosmic/amd64/libssl1.0.0/download https://packages.ubuntu. ...

  2. Golang 空指针nil的方法和数据成员

    golang中,有一个特殊的指针值nil. 如何使用nil没有方法和成员变量呢? 下面来看下具体例子. 程序中,定义结构体类型Plane, 将Plane类型的指针作为函数的参数,然后传入nil作为实参 ...

  3. jeecg根据模板自定义导出

    //1.获取模板的路径: String lujing = request.getSession().getServletContext().getRealPath("/")+ &q ...

  4. 搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度.滚动.位置相关的属性,单凭单词很难搞清楚分 ...

  5. iOS tableHeaderView有默认高度？

    在给tableView设置tableHeaderView的时候发现,如果设置tableView.tableHeaderView = [UIView new] , 这里未设置tableView的高度,但 ...

  6. 003-tomcat配置文件-server、tomcat-users

    1.server.xml讲解 位于conf下 <?xml version="1.0" encoding="UTF-8"?> <!-- Serv ...

  7. 自定义zabbix脚本--网卡平均流量

    自定义zabbix脚本--网卡平均流量1. 在客户端修改配置文件 /etc/zabbix/zabbix_agentd.conf需要改动两个地方:(1) UnsafeUserParameters=1(2 ...

  8. 一百一十八：CMS系统之短信验证码加密和js代码混淆

    前面的方法存在安全隐患,只要知道发送短信验证码的接口就可以无限触发发送短信验证码 改用post请求,在前端加scrf_token验证,后面需要使用到md5加密,引入md5 from apps.form ...

  9. MATLAB学习（二）读写xls文件

    >> N=xlsread('DRINK.xls','DRINK','A1:D8') N = 207.2000 3.3000 15.5000 2.8000 36.8000 5.9000 12 ...

  10. 利用canvas对图片进行切割

    使用input标签选择一张图片, 然后利用canvas对图片进行切割, 可以设置切割的行数和列数 这是html代码 ... <input type="file" id=&qu ...