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

发现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. C++（三十六） — 等号操作符重载、&&，||不可重载

    1.等号操作符重载,实现深拷贝 //等号运算符重载 // obj3=obj1;//原始的是浅拷贝,现在要重载为深拷贝 Name& operator=(Name &obj1) { //1 ...

  2. K3 Cloud的数据中心加载异常处理

    以前一直是财务维护的K3  Cloud突然说不能登录,用的SQL 2008的数据库,运维也搞不定,找帮忙,因为是部署在阿里云上,上去看看数据库,这个K3数据库占了600多G,想看看这个表结构,就是打不 ...

  3. MYSQL中的乐观锁实现(MVCC)简析

    https://segmentfault.com/a/1190000009374567#articleHeader2 什么是MVCC MVCC即Multi-Version Concurrency Co ...

  4. visual studio故障修复

    如果没有安装程序,直接在控制面板——>程序和功能,在列表中找到您安装的vs,右键选择更改,然后程序会启动,做一些准备.然后又三个选项,可以选择修复.

  5. LG5325 【模板】Min_25筛

    P5325 [模板]Min_25筛 题目背景 模板题,无背景. 题目描述 定义积性函数$f(x)$,且$f(p^k)=p^k(p^k-1)$($p$是一个质数),求 $$\sum_{i=1}^n f( ...

  6. js的异常处理 try catch

    <script language="JavaScript"> try { throw new Error(10,"asdasdasd") } cat ...

  7. java中List与数组的转换

    1.数组转换成List public static <T> List<T> asList(T... a) String[] arr = new String[] {" ...

  8. 行为型模式(一) 模板方法模式（Template Method）

    一.动机(Motivate) "模板方法",就是有一个方法包含了一个模板,这个模板是一个算法.在我们的现实生活中有很多例子可以拿来说明这个模式,就拿吃饺子这个事情来说,要想吃到饺子 ...

  9. java web 向数据库插入中文数据乱码问题

    一.先检查下是 页面返回数据时已经乱码了,还是在插入数据库的时候乱的码. 二.页面返回乱码: 1.  Web.XML  文件配置 <!-- 配置编码过滤器 --> <filter&g ...

  10. [Javascript] Avoid Accidental Returns of New State by using the void Keyword

    For example we have a 'useState' function, which takes a state and a function to update the state: c ...