前言

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

我们知道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 = 完美禁用

最新文章

  1. String or binary data would be truncated 解决办法
  2. Quartus II 与 Modelsim 联调【转】
  3. [问题解决]《GPU高性能编程CUDA实战》中第4章Julia实例“显示器驱动已停止响应，并且已恢复”问题的解决方法
  4. Python之路 day2 初识字典
  5. console.log的应用
  6. js算法运算
  7. Android 实现卫星菜单
  8. Web前端面试常识
  9. mapreduce的调度算法和job调优
  10. Android（java）学习笔记175：BroadcastReceiver之 外拨电话的广播接收者
  11. 站点下的GridView的RowCommand事件的设置，与站点应用不一样
  12. 在PHP中获取日期和时间
  13. 一.ubuntu14.04安装、亮度设置、显卡设置等一体化讲解
  14. css学习知识点
  15. POJ 2110 Mountain Walking 二分+bfs
  16. [SOJ] shortest path in unweighted graph
  17. 用于辅助在 bootstrap-dialog 中的表现：app-jquery-dialog.js
  18. Vuejs环境安装与工程建立【小白Windows向】
  19. 【公众号系列】SAP S/4 HANA 1809请查收
  20. 浅谈Cocos2d-js cc.director

热门文章

  1. Grafana添加Zabbix为数据源（二）
  2. Scala中的列表可以添加元素吗？
  3. Java 8 新特性之 Stream 流基础体验
  4. 【Struts中private static final long serialVersionUID的作用】
  5. springboot使用elasticsearch的客户端操作eslaticsearch
  6. 前端控制台 JavaScript函数报错 SyntaxError: expected expression, got ';' SyntaxError: expected expression, got 'if'
  7. airflow 安装配置celery+rabbitmq celery+redis
  8. 【转帖】docker-get拉取镜像
  9. Redis（1.6）Redis发布订阅
  10. 第一章 Scala基础篇