前言

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

我们知道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. 性能测试 | 记一次生产数据库sql由451s优化为0.4s的过程

    概述 最近开发说某个接口跑的很慢,排查了下发现其中一条sql,数据量不大,但居然要跑451s,下面简单记录一下优化的过程. 问题sql SELECT l.location_gid ENUMVALUE, ...

  2. SpringCloud(2)----SpringCloud理解篇

    一.微服务概述 1.什么是微服务 目前的微服务并没有一个统一的标准,一般是以业务来划分将传统的一站式应用,拆分成一个个的服务,彻底去耦合,一个微服务就是单功能业务,只做一件事. 与微服务相对的叫巨石 ...

  3. 1.3 Go语言基础之数据类型

    Go语言中有丰富的数据类型,除了基本的整型.浮点型.布尔型.字符串外,还有数组.切片.结构体.函数.map.通道(channel)等.Go 语言的基本类型和其他语言大同小异. 一.整型 1.1 基本类 ...

  4. SpringCloud（七）之SpringCloud的链路追踪组件Sleuth实战，以及 zipkin 的部署和使用

    一.前言 Spring Cloud Sleuth 主要功能就是在分布式系统中提供追踪解决方案 ,并且兼容了zipkin,提供了REST API接口来辅助我们查询跟踪数据以实现对分布式系统的监控程序 . ...

  5. Java同步数据结构之ArrayBlockingQueue

    引言 作为BlockingQueue最常见的实现类之一,ArrayBlockingQueue是通过数组实现的FIFO先进先出有界阻塞队列,它的大小在实例被初始化的时候就被固定了,不能更改.该类支持一个 ...

  6. 014-数据结构-树形结构-基数树、Patricia树、默克尔树、梅克尔帕特里夏树( Merkle Patricia Tree, MPT)

    一.基数树 Radix树,即基数树,也称压缩前缀树,是一种提供key-value存储查找的数据结构.与Trie不同的是,它对Trie树进行了空间优化,只有一个子节点的中间节点将被压缩.同样的,Radi ...

  7. Kettle源码学习（一）——把Kettle项目跑起来

    kettle(pentaho data integration),是一款开源的C/S版的ETL工具,最近打算学习一下kettle源码,并自己写一个mini kettle,并改造成基于事件触发的流处理模 ...

  8. xshell一些简单的使用---1

    1.下载本地window中 2.在sftp模式下输入:put会打开xshell下载到window的位置目录

  9. R语言与概率统计(六) 主成分分析 因子分析

    超高维度分析,N*P的矩阵,N为样本个数,P为指标,N<<P PCA:抓住对y对重要的影响因素 主要有三种:PCA,因子分析,回归方程+惩罚函数(如LASSO) 为了降维,用更少的变量解决 ...

  10. luffycity项目开发

    一. 首页的页脚 子组件Footer.vue文件: <template> <div class="footer"> <ul> <li> ...