移动端touch触摸事件（滑动效果和手势操作）

最新推荐文章于 2023-04-11 19:27:25 发布

weixin_30718391

最新推荐文章于 2023-04-11 19:27:25 发布

阅读量1.2k

点赞数

文章标签： java

原文链接：http://www.cnblogs.com/EricZLin/p/9327005.html

版权

一、定义

①touch是移动端的触摸事件，而且是一组事件，主要有以下事件：

touchstart 事件：当手指触摸屏幕的时候触发
touchmove 事件：当手指在屏幕来回滑动的时候触发
touchend 事件：当手指离开屏幕的时候触发
touchcancel事件：当被终止滑动的时候触发（来电、弹消息）

②利用touch相关事件可以实现移动端常见的滑动效果和移动端常见的手势事件，比较常用的事件主要是touchstart、touchmove、touchend，并且一般是使用addEventListener绑定事件

            dom.addEventListener('touchstart',function(){

            });
            dom.addEventListener('touchmove',function(){
                
            });
            dom.addEventListener('touchend',function(){
                
            });

二、使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>touch事件</title>
    <style>
        .body{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;background: #ccc;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        window.onload=function(){
            var box=document.querySelector('.box');
            box.addEventListener('touchstart',function(){
                console.log('start')
            });
            box.addEventListener('touchmove',function(){
                console.log('move')
            });
            box.addEventListener('touchend',function(){
                console.log('end')
            });
        }
    </script>
</body>
</html>

三、事件对象event

四、分析移动端滑动实现的原理

①让触摸的元素随着手指的滑动做位置的改变

②位置的改变，需要当前的坐标，当前手指的坐标和移动后的坐标都可以在事件对象中拿到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>touch事件</title>
    <style>
        .body{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;background: #ccc;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        window.onload=function(){
            var box=document.querySelector('.box');
            box.addEventListener('touchstart',function(e){
                console.log('开始坐标('+e.touches[0].clientX+','+e.touches[0].clientY+')');
            });
            box.addEventListener('touchmove',function(e){
                console.log('移动的坐标('+e.touches[0].clientX+','+e.touches[0].clientY+')');
            });
            box.addEventListener('touchend',function(e){
                console.log('结束的坐标不会记录');
            });
        }
    </script>
</body>
</html>

五、移动端的手势事件（实现左滑手势和右滑手势的原理）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手势事件的实现</title>
    <style>
        .body{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;background: #ccc;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        window.onload=function(){
            // 封装手势的函数
            var bindSwipeEvent=function(dom,rightCallback,leftCallback){
                // 手势实现的条件:滑动并且滑动距离大于50px
                var isMove=false;
                var startX=0;
                var distanceX=0;
                dom.addEventListener('touchstart',function(e){
                    startX=e.touches[0].clientX;
                });
                dom.addEventListener('touchmove',function(e){
                    isMove=true;
                    var moveX=e.touches[0].clientX;
                    distanceX=moveX-startX;
                });
                dom.addEventListener('touchend',function(e){
                    // 滑动结束
                    if(isMove && Math.abs(distanceX)>50){
                        if(distanceX>0){
                            rightCallback && rightCallback.call(this,e);
                        }else{
                            leftCallback && leftCallback.call(this,e);
                        }
                    }
                    // 重置参数
                    isMove=false;
                    startX=0;
                    distanceX=0;
                });
            };
            // 调用
            bindSwipeEvent(document.querySelector('.box'),function(e){
                console.log('左滑手势');
            },function(e){
                console.log('右滑手势');
            })
        }
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/EricZLin/p/9327005.html

weixin_30718391

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
移动端touch触摸事件（滑动效果和手势操作）

一、定义①touch是移动端的触摸事件，而且是一组事件，主要有以下事件：touchstart 事件：当手指触摸屏幕的时候触发touchmove 事件：当手指在屏幕来回滑动的时候触发touchend 事件：当手指离开屏幕的时候触发touchcancel事件：当被终止滑动的时候触发（来电、弹消息）②利用touch相关事件可以实现移动端常见的滑动效果和移动端常见的手势事件...
复制链接

扫一扫