Calx
Calx
  • 发布:2017-04-26 22:09
  • 更新:2017-04-27 08:51
  • 阅读:3245

Click,Tap事件延时

分类:MUI

目前正在使用dcloud的全家桶(HBuilder+MUI)开发一款计算器的应用,之前开发时一直在安卓手机上进行真机测试,除了点击时button的选中特效延时外事件处理还是很迅速的(此时采用click事件实现)。

但今天开发的差不多了换到IOS上做真机测试时发现IOS上button的click直接废了,延时感很强,如果连续点击按钮,部分按钮将不触发click事件。

随后经过一番百度、谷歌之后发现了click事件在mobile上的300ms延时历史,以及该文
http://ask.dcloud.net.cn/article/530 中提到MUI已经使用H5的Tap事件取代了Click事件。

随后本人更换了触发事件,使用了mui.on('tap')进行测试后,发现在IOS上确实可以正确触发了,但延时感依然强烈。

接着我撤去所有逻辑进行点击即输出点中按钮的值进行测试,看是否与逻辑运算导致的性能问题,但情况依然没有改善。

在测试中发现连续快速点击多个button时,点击事件可以按着点击顺序依次延时触发,想必是点击事件进入了一个队列吧,但是延时感依旧很强(依旧大约300ms)。

以上即是IOS下button的click及tap事件问题,在安卓下click除了button特效之外,触发是无延时的,但安卓下的tap事件却和IOS一样存在延时的问题,测试MUI的templae时问题依旧

IOS:10.3.1
安卓:5.1.1

HBuilder:8.1.0
MUI:3.6.0

部分调用代码:

<button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" data-index="1">按钮1</button>  
            <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" data-index="2">按钮2</button>  
            <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" data-index="3">按钮3</button>
mui(document.body).on('tap', '.mui-btn', function (e) {  
    console.log(this.getAttribute("data-index"));  
});
2017-04-26 22:09 负责人:无 分享
已邀请:
Calx

Calx (作者)

click的延时已解决(IOS和安卓流畅度表现一至),但mui-btn-outlined 特效在安卓上存在延时问题,IOS还算流畅(iPhone 6)

使用了 https://github.com/jquery/PEP 插件修复

善不清楚为什么MUI的tap事件为何存在延时,还望官方帮忙解答下

解决该问题时发现更多历史原因,有兴趣搞明白这个些问题的朋友可以参考如下文章

https://thx.github.io/mobile/300ms-click-delay

首先试了网上大多数文章推荐的FastClick,但本人测试时IOS仅仅是改善,延时缩减到100ms以内,仍然存在延时比如快速连续按下123456789,之前只能输出1,使用FastClick之后会输出13579

上文中提到的google和微软的插件已经合并到PEP,正是该插件解决了延时的问题。

与vue.js的结合使用代码为:<button v-on:pointerup="btnclick">

原生及JQ写法请参考PEP的git文档

虽然问题已解决但希望MUI官方能修缮一下这个问题,此问题在MUI的Template示例中就存在延时

  • 温柔如斯

    pep事件你用的哪个?pointerdown?还是pointerup?

    2018-11-27 18:42

黑色火焰

黑色火焰 - 个人博客:http://blog.luotiankeji.com

如果FastClick都无法解决,那应该就没办法了。
对响应及时性有要求的,就不得不用原生了。

  • Calx (作者)

    用PEP已经完美解决了,现在还差特效在安卓有延时

    2017-04-27 10:07

lam

lam

用touch吧

该问题目前已经被锁定, 无法添加新回复