文档章节

移动端touch事件无视disabled属性

放开那个女孩
 放开那个女孩
发布于 2017/08/11 14:26
字数 777
阅读 6
收藏 0

先上个 demo ,点击全屏查看,切换到移动模拟模式,并点击按钮,查看控制台。发现click没有事件没有触发,而touch事件依然触发。

算是倒序,虽然不是写小说,拍电影科科~

这个问题挺早就发现了,当时使用Angular + hammerjs,很疑惑为啥disabled的按钮还能触发tap事件,Google无果,无奈通过别的方式在touch事件触发时,判断当前是否处于disabled状态,是则不往下执行。后来,自己在bootstrap的UI框架下,做了个实验,按照平常的习惯,写了个button.btn.btn-default,再添加disabled属性,模拟项目环境,依然引入了Angular + hammerjs,绑定了hm-tap指令,意外的发现居然不会触发tap事件,陷入苦思冥想中。

接着,我把问题简化,移除Angular 和 hammerjs,只使用jquery绑定touch事件,发现依然不会触发touch事件,上个类似我当时使用的 实验代码

通过与上面代码的对比,你应该不难发现,前后只差了 btn 和 btn-default 这两个class,于是就有了线索。那再去掉一个class试试?发现去掉btn-default后,还是不触发touch事件,再去掉btn就恢复到了上个demo的情况了。也就是说,bootstrap的btn这个class,做了某件事可以阻止disabled触发touch事件!

事情更加明朗了,那么我们来看看btn这个“神奇”的class都干了神马。使用chrome审查元素,找啊找,发现了这个:

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

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events. When this property is unspecified, the same characteristics of the visiblePainted value apply to SVG content.

In addition to indicating that the element is not the target of mouse events, the value noneinstructs the mouse event to go “through” the element and target whatever is “underneath” that element instead.
一共有11个值,其中只有 auto 和 none 是普通web元素的,其他的都是 SVG only的,SVG相关的我们暂不讨论。

auto 是默认值。

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

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

我们再来看一下它的浏览器兼容性:

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

 

总结

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

 

本文转载自:http://cloudstone.xin/2015/09/03/%E7%A7%BB%E5%8A%A8%E7%AB%AFtouch%E4%BA%8B%E4%BB%B6%E6%97%A0%E8%A7%8

放开那个女孩
粉丝 4
博文 112
码字总数 43124
作品 0
杭州
程序员
私信 提问
移动端兼容问题注意事项

1. IOS移动端click事件300ms的延迟响应 移动设备上的web网页有300ms延迟,有时会造成按钮点击延迟或者点击失效。 苹果为了将适用于PC端大屏幕的网页能较好的展示在手机端上,使用了双击缩放(...

kouxiaomou
2017/02/23
0
0
移动端才坑注意事项

IOS移动端click事件300ms的延迟响应 移动设备上的web网页是有300ms延迟的,玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的, 2007年苹果发布首款...

Billydotzhang
2016/11/11
289
0
也来说说touch事件与点击穿透问题

前言 做过移动端H5页面的同学肯定知道,移动端web的事件模型不同于PC页面的事件。看了一些关于touch事件的文章,我想再来回顾下touch事件的原理,为什么通过touch可以触发click事件,touch事...

大灰狼的小绵羊哥哥
01/01
0
0
JS原生系列-DOM篇(扩展)

继续DOM的研究工作,我们扩展对dom api的学习! 1.介绍针对低级浏览器,能力的监测处理: 2.针对移动端,touch事件的介绍: 3.最后做几个网页实例! 4.ajax的介绍:ajax输出json格式文件 js...

透笔度
2015/08/08
163
0
Cocos2d-x中触摸事件

理解一个触摸事件可以从时间和空间两方面考虑。 1、触摸事件的时间方面 触摸事件的在时间方面,如下图所示,可以有不同的“按下”、“移动”和“抬起”等阶段,表示触摸是否刚刚开始、是否正...

智捷课堂
2014/07/23
44
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
30分钟前
26
0
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
9
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部