button按钮的状态为disabled禁用状态,click事件无法触发,但是为什么touchstart下却依然可以触发
切换到移动模拟模式,并点击按钮,查看控制台。
发现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下却依然可以触发的更多相关文章
- Winform中使用代码编写Button按钮的点击事件
场景 一般在进行Winform窗体开发时都会拖拽一个Button,然后双击进入Button按钮的点击事件中,进行 点击事件的编写. 如果窗体上事先没有Button按钮,是在代码中生成的Button按钮 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:禁用状态
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap系列 -- 20. 禁用状态
Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled” 在使用了“form-control”的表单控件中,样式设置了禁用表单背景 ...
- Bootstrap 表单控件状态(禁用状态)
Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”.和其他表单的禁用状态不同的是,Bootstrap框架做了一些样式风格的处 ...
- Thinkpad 笔记本VMware Workstation 安装虚拟机出现“此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态”解决方法
今天在使用VMware打算在机器中安装新的虚拟机时,出现"此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态"错误如下: 提示信息: 已将该虚拟机配 ...
- VMware安装64位操作系统提示Intel VT-x处于禁用状态的解决办法
用VMware安装64位操作系统时,如果目前本地的操作系统是64位的,那么可以说明CPU是肯定支持64位的,这时候如果提示此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态.这个 ...
- 解决虚拟机vmware安装64位系统“此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态”的问题
虚拟机使用的是VMware Workstation,并且首次在虚拟机体验64 位系统.在新建好虚拟机,运行时候就出现了VMware Workstation 的提醒:此主机支持 Intel VT-x,但 ...
- Vmware报错:此主机支持IntelVTx 但IntelVTx处于禁用状态
"此主机支持IntelVTx 但IntelVTx处于禁用状态",报错原因:电脑未开启虚拟化 解决方案: 电脑关机(是关机不是重启)--开机,进BIOS --选择 configura ...
- “此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态”的问题的解决
虚拟机使用的是VMware Workstation,并且首次在虚拟机体验64 位系统.在新建好虚拟机,运行时候就出现了VMware Workstation 的提醒:此主机支持 Intel VT-x,但 ...
随机推荐
- python之变量的数据类型(2)list 、 tuple 及range用法
一.变量的数据类型(2) 1.list 类型 列表的特点: 列表是一个可变的数据类型 列表由[]来表示, 每一项元素使用逗号隔开. 列表什么都能装. 能装对象的对象. 列表可以装大量的数据 列表的索引 ...
- 移动魔百和PTV-8098可以免拆直接安装第三方的软件
前言:江苏用户的福音啊!当地移动魔百和PTV-8098可以免拆直接安装第三方的软件,其他地区的PTV-8098未做测试,可以自己根据教程步骤进行测试: 准备工具:8G或4G的U盘(太大无法识别).电脑 ...
- DT二次开发之-采购页面加入好看的倒计时
加入采购页面倒计时,个人感觉挺漂亮的,做下笔记. <span id="timer" ></span> {if $totime} <script typ ...
- git常用命令总结--原创
0.git status 仓库状态1.git add 工作区-->暂存区2.git commit 暂存区-->版本库3.git log 查看日志4.git reset --hard hea ...
- 浏览器缓存控制 以及 在url框中回车、F5 和 Ctrl + F5的区别
第一部分: 浏览器缓存如何控制? 做网站,不知道缓存是什么东西怎么能行! 如何实现HTTP缓存呢? 下面我们来一步一步的探寻实现机制把. 方案一: 无缓存 说明:浏览器向服务器请求资源m.pn ...
- 查看mysql日志文件
开启mysql日志 /etc/mysql/mysql.conf.d/mysqld.cnf sudo vi /etc/mysql/mysql.conf.d/mysqld.cnf 找到第68,69行 前面 ...
- 配置Sublime,为了Python
E:\Sublime Text 3\Data\Packages\User\untitled.sublime-build { "cmd": ["C:\Program Fil ...
- TPC-H 下载参考
CSDN免费下载地址 tpc-h-v2.17.3.zip tools https://download.csdn.net/download/zes2014/10558251
- Hive ACID和事务表支持详解
一.ACID介绍 ACID就是常见数据库事务的四大特性:Atomicity(原子性).Consistency(一致性).Isolation(隔离性).Durability(持久性). 在Hive 0. ...
- MongoDB collection Index DB 大小查询
1.collection中的数据大小 db.collection.dataSize() 2.为collection分配的空间大小,包括未使用的空间db.collection.storageSize() ...