这个轮播代码不是我自己所写，是偶然游览一个简友的主页看到的，今天刚看了事件，决定来逐行分析一下这个代码。首先，移动端与电脑端不同的是移动端只能通过触摸和手势来发生行为，所以我们要用到js中的与触摸操作有关的新事件。其实我们轮播的原理和以前相同，都是通过改变元素的位置来控制图片的出现，但让我们不是很上手的，是那些用于跟踪触摸的属性。
下面，我简单介绍一下与触摸相关的知识
触摸事件
- touchstart：当手指触摸屏幕时触发，一只手指放在屏幕上也会触发
- touchmove：当手指在屏幕上滑动时连续触发。在这个事件发生期间可以用preventDefault()可以阻止滚动。
- touchend：手指从屏幕移开时触发。
- touchcancel：当系统停止跟踪触发时触发。
上面这几个事件都会冒泡，也都可以取消。
属性
- touches:表示当前跟踪的触摸操作的Touch对象的数组
- targetTouches:特定于事件目标的Touch对象的数组。（简单点可以理解为手指触摸屏幕的位置）
- changeTouches表示自上次触摸以来发生了什么改变的touch对象的数组。（手指离开的位置）
每个touch对象包括下列属性
- clientX:触摸目标在视口中的x坐标
- clientY:触摸目标在视口中的y坐标
- identifier:标识触摸的唯一ID
- pageX:触摸目标在页面中的x坐标
- pageY:触摸目标在页面中的y坐标
- screenX:触摸目标在页面中的x坐标
- screenY:触摸目标在页面中的y坐标
- target:触摸的dom节点目标
代码如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。