前言

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

我们知道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. 使用 usb 调试的时候，连接上电脑没反应

    使用 usb 调试的时候,连接上电脑没反应 原因: 手机上没有信任本计算机的授权,请在手机上信任该授权 解决方法: 原因就是手机上会有一个弹话框,让我们信任该计算机,我们才可以进行 usb调试 我们的 ...

  2. Nginx命令与配置详解

    1. 控制命令 ./sbin/nginx –t 测试配置是否正确 ./sbin/nginx –s reload 加载最新配置,进程并不重启  ./sbin/nginx –s stop  立即停止   ...

  3. 用PHP自带函数对二维数组进行排序

    经常会面临这样的需求,虽然有时候我们可以在数据库查询的时候,直接对数据进行排序,但还是无法满足日益复杂的业务需求. 这里边会用到两个函数 一个是array_column()函数,这个函数接受三个参数. ...

  4. Activity节点

    1.android:allowTaskReparenting Android:allowTaskReparenting是一个任务调整属性,它表明当这个任务重新被送到前台时,该应用程序所定义的Activ ...

  5. 操作 SQL语句之数据操作语言（DML）详解

    一.插入数据(INSERT) MariaDB [(none)]> help insertName: 'INSERT'Description:Syntax:INSERT [LOW_PRIORITY ...

  6. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-4.后端项目分层分包及资源文件处理

    笔记 4.后端项目分层分包及资源文件处理     简介:项目基本目录结构,包名称建立,配置文件建立 1.基本目录结构                 controller             se ...

  7. 数据结构之AVL

    简介: 一棵AVL树有如下必要条件: 条件一:它必须是二叉查找树.(左<根<右) 条件二:每个节点的左子树和右子树的高度差至多为1. AVL相关概念: 平衡因子:将二叉树上节点的左子树高度 ...

  8. k8s集群部署（3）

    一.利用ansible部署kubernetes集群环境准备 基于二进制方式部署和利用ansible-playbook实现自动化:既提供一键安装脚本,也可以分步执行安装各个组件,同时讲解每一步主要参数配 ...

  9. Linux 查看 MySQL的版本信息

    Linux 查看 MySQL的版本信息 如何查看某台 Linux 主机上的 安装的 MySQL版本信息? 使用如下命令,查看 MySQL的版本信息: mysql -V 或者 mysql --versi ...

  10. Dubbo架构与底层实现

    一.Dubbo的设计角色 (1)系统角色Provider: 暴露服务的服务提供方.Consumer: 调用远程服务的服务消费方.Registry: 服务注册与发现的注册中心.1Monitor: 统计服 ...