切换到移动模拟模式,并点击按钮,查看控制台。

发现click没有事件没有触发,而touch事件依然触发。

解决办法:

对于移动端我们使用css来禁止按钮,达到disable的效果:

对,就是这个神奇的pointer-events属性!回忆一下,很早前就看到过这个属性,不过当时并没有进入到移动端的开发领域,对它的作用并没有过多关注。我们来看一下mdn上怎么说的:

auto 是默认值。

设置pointer-events:none的元素,将不会成为事件目标。但是如果其子孙元素设置了pointer-events:auto,该子孙元素仍然可成为事件目标,并且如果该事件支持冒泡,其设置了pointer-events:none的祖先元素,也会由于冒泡触发相应的监听事件。

又是IE拖后腿了囧,不过移动端表现良好~

总结

pointer-events这个CSS3属性,在移动端我们基本可以“放肆”的使用,在你需要禁用某个元素事件或某个区域事件的时候,可以考虑下这个属性,简单高效~

嗯,终于搞明白这个属性了!

button按钮的状态为disabled禁用状态,click事件无法触发,但是为什么touchstart下却依然可以触发的更多相关文章

  1. Winform中使用代码编写Button按钮的点击事件

    场景 一般在进行Winform窗体开发时都会拖拽一个Button,然后双击进入Button按钮的点击事件中,进行 点击事件的编写. 如果窗体上事先没有Button按钮,是在代码中生成的Button按钮 ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:禁用状态

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

  3. Bootstrap系列 -- 20. 禁用状态

    Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled” 在使用了“form-control”的表单控件中,样式设置了禁用表单背景 ...

  4. Bootstrap 表单控件状态(禁用状态)

    Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”.和其他表单的禁用状态不同的是,Bootstrap框架做了一些样式风格的处 ...

  5. Thinkpad 笔记本VMware Workstation 安装虚拟机出现“此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态”解决方法

        今天在使用VMware打算在机器中安装新的虚拟机时,出现"此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态"错误如下:  提示信息: 已将该虚拟机配 ...

  6. VMware安装64位操作系统提示Intel VT-x处于禁用状态的解决办法

    用VMware安装64位操作系统时,如果目前本地的操作系统是64位的,那么可以说明CPU是肯定支持64位的,这时候如果提示此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态.这个 ...

  7. 解决虚拟机vmware安装64位系统“此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态”的问题

    虚拟机使用的是VMware Workstation,并且首次在虚拟机体验64 位系统.在新建好虚拟机,运行时候就出现了VMware Workstation 的提醒:此主机支持 Intel VT-x,但 ...

  8. Vmware报错:此主机支持IntelVTx 但IntelVTx处于禁用状态

    "此主机支持IntelVTx 但IntelVTx处于禁用状态",报错原因:电脑未开启虚拟化 解决方案: 电脑关机(是关机不是重启)--开机,进BIOS --选择 configura ...

  9. “此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态”的问题的解决

    虚拟机使用的是VMware Workstation,并且首次在虚拟机体验64 位系统.在新建好虚拟机,运行时候就出现了VMware Workstation 的提醒:此主机支持 Intel VT-x,但 ...

随机推荐

  1. table标签修改tr,td标签的行距

    修改tr标签的行距,tbale标签的td标签间距 看如下Css文件的代码,其都没有table的tr行距产生效果 tr{ margin-top: 10px; padding: 10px; } td{ m ...

  2. Access、Trunk和Hybrid三种端口模式

    网络交换机(英语:Network switch)是一个扩大网络的器材,能为子网中提供更多的连接端口,以便连接更多的电脑. 通俗来说其起到的作用就是把一个网络端口分成多个网络端口 交换机和路由器的区别 ...

  3. 通过visual studio制作类库的文档

    java的集成开发工具,可以导出jar的文档. visual studio 也可以生成类库的文档,邮件项目属性,生成,输出下,选择XML文档文件.然后生成项目,就会再bin下面生成一个xml文件. 将 ...

  4. Linux 服务器性能出问题,排查下这些参数指标

    taozj马哥Linux运维 一个基于 Linux 操作系统的服务器运行的同时,也会表征出各种各样参数信息.通常来说运维人员.系统管理员会对这些数据会极为敏感,但是这些参数对于开发者来说也十分重要,尤 ...

  5. 《ABCD组》第九次团队作业:Beta冲刺与验收准备

    <ABCD组>第九次团队作业:Beta冲刺与验收准备 项目 内容 这个作业属于哪个课程 http://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 http ...

  6. .net框架-数组(Array)& ArrayList & List

    数组(Array)特点: 初始化时规定长度 元素类型相同 数据存储连续,效率高 System.Collections.ArrayList : 初始化时无需规定长度,长度随存储的数据动态扩充与收缩 元素 ...

  7. 使用safe-rm替换rm命令,防止误删除

    1.下载safe源码包: wget https://launchpad.net/safe-rm/trunk/0.12/+download/safe-rm-0.12.tar.gz 2.解压safe-rm ...

  8. PostgreSQL 锁机制浅析

    锁机制在 PostgreSQL 里非常重要 (对于其他现代的 RDBMS 也是如此).对于数据库应用程序开发者(特别是那些涉及到高并发代码的程序员),需要对锁非常熟悉.对于某些问题,锁需要被重点关注与 ...

  9. Luogu P1903 BZOJ 2120 数颜色 带修改的莫队

    https://www.luogu.org/problemnew/show/P1903 之前切过这道题,复习莫队再切一遍,不过我之前写的是主席树和树状数组,也不知道我当时怎么想的…… 这个题卡常我没写 ...

  10. 各种DTO类最好有 无参数的构造方法

    以一下这个类为例 @Getter @Setter @ToString class Person { private String s; public Person(String s) { this.s ...