Webapp,使用<a>标签做点击按钮,为什么会有卡顿的感觉?

2016-08-30 09:25:40 +08:00
 NicholasNC

如上图所示,做了一个 webapp ,上图中各个按钮都是用标签做的(除了输入框)。当中 js 的逻辑很简单,只是点击之后增加 /删除一个 class 。然后,在安卓下是没问题的,但在 ios 下有明显的 卡顿 的感觉

另外,下图。点击 + 输入框不断加 1 ,安卓下一点问题都没有,连续点击、连续加 1 ,但是 ios 打死都不行, 连续 点击 只算一次 ,也就是连续点击 n 次之后还是当作点击了一下,只是做了一次+1 操作

我才这两种情况都是同一个原因,但具体不知道为什么为这样。

3395 次点击
所在节点    问与答
8 条回复
CodingMonkey
2016-08-30 09:41:25 +08:00
通过 "click" 来监听点击事件的话, safari 会有 300ms 的延时
CodingMonkey
2016-08-30 09:42:32 +08:00
可以借助 [fastclick]( https://github.com/ftlabs/fastclick) 来做兼容
newbieo0O
2016-08-30 09:45:12 +08:00
浏览器默认 double tap 是放大功能。系统需要延迟检测是不是你想要放大页面,所以感觉慢。
NicholasNC
2016-08-30 10:11:14 +08:00
@CodingMonkey 好的,问题确实是 300ms 的延时,用 fastclick 确实可以解决问题。

谢谢(*^__^*)
YuJianrong
2016-08-30 10:11:53 +08:00
iOS 8 之后, WKWebView 和 Safari 只要加了 <meta name="viewport" content="user-scalable=no"> 就没有 300ms 延迟了。你没加?
NicholasNC
2016-08-30 10:16:40 +08:00
@YuJianrong

`<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">`

有加,不过还是有问题
NicholasNC
2016-08-30 10:24:00 +08:00
[移动端 click 事件延迟 300ms 到底是怎么回事,该如何解决?]( http://www.xiaomeiti.com/note/3585)

这篇文章感觉可以
YuJianrong
2016-08-30 10:32:38 +08:00
@NicholasNC 不知道是不是和你用了 initial-scale=0.5 这种数值有关。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/302594

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX