专栏首页山河木马移动端touch事件无视disabled属性 转

移动端touch事件无视disabled属性 转

先上个 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属性,在移动端我们基本可以“放肆”的使用,在你需要禁用某个元素事件或某个区域事件的时候,可以考虑下这个属性,简单高效~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js中的事件(event)

    我们可以简单的把事件理解为浏览器的感知系统。比如说:他可以感觉到用户是否点击(click)了页面、鼠标是否进入了页面的某个元素上面(mouseover或mous...

    山河木马
  • 移动端click延迟及zepto的穿透现象 转

    穿透现象与click的延迟解决方法是分不开的,若要了解穿透现象,需要先了解click延迟的解决原理。

    山河木马
  • WEB页面打印方法,包括如何设置打印分页(转)

    最常用的就这3个方法了,写在按钮控件的ONCLICK事件里,当按钮CLICK的时候就会除法打印的事件了

    山河木马
  • 通过特征去样式化识别Instagram过滤图像(CS CV)

    当加入小扰动(如高斯噪声)时,深度神经网络表现出较差的泛化能力,然而很少有人研究它们对更自然的图像转换(如照片过滤器)的鲁棒性。这篇文章研究了常用的预训练模型如...

    DANDAN用户6837186
  • python requests 如何达到关闭强制urlencode的效果

    requests库是python中常用的网络库,有着比原生urllib更丰富的功能和更易用的接口,但是并不一定有相当的灵活性。这不现在就有一个问题。

    一次次尝试
  • 操作系统学习笔记-4:进程同步与进程互斥(一)

    上一篇笔记我们已经讲了进程的相关概念和进程控制的知识,这篇笔记则涉及到了进程同步与进程互斥。

    Chor
  • ggalluvial做图

    ggalluvial是依赖于ggplot做alluvial plot的一个R包。官方文档:https://cran.r-project.org/web/pack...

    生信编程日常
  • String Problem(KMP+最小表示法)- HDU 3374

    Give you a string with length N, you can generate N strings by left shifts. For ...

    ACM算法日常
  • JMS--ActiveMQ的简单使用

    消息中间件利用高效可靠的消息传递机制进行平台无关的数据交流,并基于数据通信来进行分布式系统的集成。通过提供消息传递和消息排队模型,它可以在分布式环境下扩展进程...

    宋先生
  • 你用JavaGUI做的课程设计是这样子的吗?

    很多人学完《Java基础教程》后,接着一般都会用GUI来做一下课程设计,多数同学通常选择用插件WindowBuilder来设计程序的界面,认为用插件做会更快更...

    benny

扫码关注云+社区

领取腾讯云代金券