移动web-触摸事件touch

最新推荐文章于 2022-04-17 19:12:11 发布

Milly_Liu

最新推荐文章于 2022-04-17 19:12:11 发布

阅读量336

点赞数

分类专栏：移动web

本文链接：https://blog.youkuaiyun.com/qq_38148024/article/details/104909930

版权

移动web 专栏收录该内容

2 篇文章

订阅专栏

本文深入解析移动端touch事件，包括touchstart、touchmove、touchend和touchcancel等，讲解如何利用这些事件实现滑动和手势操作，同时介绍事件对象e及其中的changedTouches、targetTouches和touches属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

touch事件

touch是移动端的触摸事件，而且是一组事件，比如：

touchstart：当手指触摸屏幕的时候就触发
touchmove：当手指在屏幕中来回滑动的时候触发
touchend：当手指离开屏幕的时候触发
touchcancel：当被迫终止滑动的时候触发。（比如：来电，有消息弹出）

利用touch相关事件实现移动端常见滑动事件和移动端常见的手势事件。

touch的使用

绑定事件: box.addEventListener('touchstart', function () { })

	<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>

事件对象e:

box.addEventListener('touchstart', function (e) {  
                console.log('start');
                console.log(e); // TouchEvent {isTrusted: true, touches: TouchList, targetTouches: TouchList, changedTouches: TouchList, altKey: false, …}
            });

在这个事件对象中主要使用的有3个：changedTouches、targetTouches和touches。这个3对象的名字都是TouchList，表示的是触摸点的集合。什么是触摸点？一个手指触摸就是一个触摸点，两只手指触摸就是两个触摸点，即：与屏幕的触摸点的个数。

changedTouches：改变后的触摸点集合
targetTouches：当前元素的触摸点的集合
touches：页面上所有触摸点的集合

触摸点集合在每个事件触发的时候会不会去记录触摸？
changedTouches每个事件都会记录触摸，而targetTouches和touches在离开屏幕的时候无法记录触摸点。
移动端根据触摸点实现滑动的原理：（应用于轮播图的制作）
实际上就是让触摸的元素随着手指的滑动做位置的改变。而要想做位置的改变就需要知道当前手指的坐标。
在每一个触摸点中会记录当前触摸点的坐标：
在第一个触摸点e.touches[0]中会记录很多的坐标，主要使用的饿有3组：基于浏览器窗口的（基于视口的）clientX, clientY；基于页面的（基于视口的）pageX, pageY和基于屏幕的screenX, screenY。
其实，我们先要得到的是触摸点位置的变化值，跟坐标点的数值没有关系，所以以上3组触摸点的坐标都可以实现。