让前端飞

初探移动端——简易计算器

2018-07-14  本文已影响7人  闪闪发光的狼

之前一直做的PC端,总想着能慢慢往移动端靠拢。先拿个计算器demo练练手吧。


移动端的布局,也不太懂,只考虑了本机的布局情况,见谅。
demo地址 计算器
代码地址 github

发现一个大坑,我是用事件代理绑定事件的,结果IOS下click死活不起效果,PC端chorme已经调好了。查了很久,发现IOS对事件委托还有格外的要求

当委托到document时,只有目标元素为a或者button才行
委托事件的时候,委托到body以下的元素上面
对目标元素使用CSS cursor:pointer, 或者应用于其父元素——包括html都行,不过会导致复制粘贴失效,而且点击时候高亮

好不容易点击事件有用了,结果每次点击,屏幕都会有闪烁。

在ios端,safari浏览器上触发click事件有300ms的延迟响应,为touch添加的样式会和click冲突而出现闪烁问题
在safari中触摸事件的相应顺序如下:
touchstart --> touchmove --> touchend --> click(300ms)
此时可试用以下样式取消click事件的默认样式来消除页面闪烁问题

*{
   -webkit-tap-highlight-color:rgba(0,0,0,0);
}

到此解决了。
第一次踩移动端的坑。

上一篇下一篇

猜你喜欢

热点阅读