移动端网页特效

Koite

已于 2022-08-12 21:36:03 修改

阅读量153

点赞数

文章标签： ios javascript webview

于 2022-03-03 13:06:43 首次发布

本文链接：https://blog.csdn.net/Koite/article/details/123251377

版权

触屏事件

概述

移动端浏览器兼容性好，不需要考虑JS的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有自己独特的地方。比如触屏事件touch（也称触摸事件），Android和IOS都有

常见事件

触屏touch事件	说明
touchstart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指从一个DOM元素上移开时触发

触摸事件对象(TouchEvent)

touchstart、touchmove、touchend三个事件都会各自有事件对象

触摸事件对象重点三个常见对象列表：

触摸列表	说明
touches	正在触摸屏幕的所有手指的一个列表
targetTouches	正在触摸当前DOM元素上的手指的一个列表
changedTouches	手指状态发生了改变的列表，从无到有，从有到无变化

移动端拖动元素

注意：手指移动也会触发滚动屏幕，所以要阻止默认的屏幕滚动e.preventDefault();

检测过度完成事件

transitionend

element.addEventListener('transitionend',fuction(){});等待过度结束，再执行

classList属性

返回元素类名 ie10以上支持

添加类

element.classList.add('类名');

移出类

element.classList.remove('类名');

切换类

element.classList.toggle('类名');

如果含有这个类名就去掉，如果没有这个类名就加上

移动端click延时解决方案

移动端点击事件会有300ms的延时，原因是移动端屏幕双击会缩放页面

解决方案：

禁止缩放：浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟
```
<meta name="viewport" content="user-scalable=no">
```

利用touch事件封装一个事件解决300ms延迟问题

原理：

当手指触摸屏幕，记录当前触摸时间
当手指离开屏幕，用离开的事件减触摸时间

如果时间小于150ms，并且没有滑动过屏幕，就定义为点击

<script>
    //封装tap,解决click 300ms延时
    function tap (obj, callback){
        var isMove = false;
        var startTime = 0; /记录触摸时候的时间变量
        obj . addEventListener (' touchstart', function (e) {
            startTime = Date.now(); //记录触摸时间
        });
        obj.addEventListener ( 'touchmove',function (e) {
            isMove = true; // 看看是否有滑动，有滑动算拖拽，不算点击
        });
        obj.addEventListener ('touchend', function (e) {
            if (!isMove && (Date.now() - startTime) < 150) { // 如果手指触摸和离开时间小于150ms算点击   
                callback && callback(); //执行回调函数
            };
            isMove = false; // 取反重置     
            startTime = 0
        });
    }
//调用
tap(div, function(){执行代码});
</script>