问题形容
挪动端因为屏幕双击会缩放页面,因而挪动端click事件会有300ms延时状况的产生
解决方案
办法一:全局禁止缩放
- 在html页面头部的meta标签中加上content="user-scalable=no"
<meta content="user-scalable=no">
- 该办法会让浏览器禁用默认的双击行为并且去掉300ms点击延时
- 实用场景:须要对整个页面进行禁用双击行为。然而个别不罕用。
办法二:封装tap函数解决300ms提早
原理
- 当手指触摸屏幕,记录以后触摸工夫
- 当手指来到屏幕,用来到工夫减去触摸工夫
- 如果工夫小于150ms,并且没有滑动过屏幕,那么将这行为近似作为点击事件来解决,并实现相应的点击处理函数
- 实现代码
/** * 封装tap 解决挪动端click事件300ms延时问题 * @param obj 监听对象 * @param callback 执行的函数 */ function tap(obj,callback) { // 判断是否滑动的标记位 var isMove = false; // 记录触摸开始工夫 var startTime = 0; // 开始触摸 记录开始触摸工夫 obj.addEventListener('touchstart',function (e) { startTime = Date.now(); }) // 开始滑动 扭转滑动标记位 有滑动 算拖拽 不算点击 obj.addEventListener('touchmove',function () { isMove = true; }) // 手指来到屏幕 obj.addEventListener('touchend',function () { // 如果为滑动事件 则间接掠过 如果不是滑动事件且 工夫小于150ms则认为是点击操作 将执行点击业务逻辑,也即回调函数callback() if (isMove && (Date.now() - startTime < 150)) { // 如果有回调函数 则执行回调函数中的业务逻辑 callback && callback(); } // 重置标记位 isMove = false; startTime = 0; })}// 调用 tap(div,function () { // 执行业务逻辑 })