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

闪闪发光的狼IP属地: 浙江
字数 327阅读 1,108

之前一直做的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);
}

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
3人点赞
更多精彩内容,就在简书APP
"小礼物走一走,来简书关注我"
还没有人赞赏,支持一下
总资产3共写了1.2W字获得143个赞共95个粉丝