移动端浏览器兼容性较好,不需要考虑以前JS的兼容性问题,可以放心的使用原生JS书写效果,但是移动端也有自己独特的地方,比如触屏事件touch。
一、触屏事件touch
二、触摸事件对象 TouchEvent
TouchEvent是一类描述手指在触摸面板(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动、触点的增加和减少等。
当我们手指离开屏幕的时候,touches、targetTouches列表就没有了,但是会有changedTouches。
三、click延时解决方案
移动端click事件会有300ms的延时,原因是移动端屏幕双击会缩放页面,所以单次点击屏幕时候,会默认300ms等待下次点击。
1、禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。
<meta name="viewport" content="user-scalable=no">
2、利用touch事件封装解决延时问题
(1)当我们手指触摸屏幕,记录当前触摸时间
(2)当我们手指离开屏幕,用离开的时间减去触摸的时间
(3)如果时间小于150ms,并且没有滑动过屏幕,那么我们就定义为点击