文章目录

前言
一、触摸事件
二、事件对象 event
三、功能案例
- 1. 检测滑动方向
- 2. 实现元素拖拽
- 3. 实现元素旋转
总结

前言

为了给基于触摸的用户界面提供高质量的支持，触摸事件提供了在触摸屏或触控板上解释手指（或触控笔）活动的能力。我们可以通过触摸事件监听用户的操作，从而响应用户。

一、触摸事件

触摸事件主要有三种，一种是触摸开始，一种是触摸并且滑动，还有一种是触摸结束：

touchstart: 开始触摸.
touchmove: 触摸滑动.
touchend: 触摸结束.

二、事件对象 event

我们先绑定一个开始触摸事件给 body 来查看一下回调函数中的 event 对象。注意，需要打开浏览器的移动设备调试。

<style>* {margin: 0;padding: 0;}body {width: 100vw;height: 100vh;background-color: #2c3e50;}
</style>
<body></body>
<script>let body = document.getElementsByTagName("body")[0];body.addEventListener("touchstart", function (e) {console.log(e);});
</script>

重要参数：

touches: TouchList 列表，只读。会列出所有当前在与触摸表面接触的 Touch 对象，不管触摸点是否已经改变或其目标元素是在处于 touchstart 阶段。
targetTouches: TouchList 列表，只读。包含仍与触摸面接触的所有触摸点的 Touch 对象。
changedTouches: 这个 TouchList 对象列出了和这个触摸事件对应的 Touch 对象。
- 对于 touchstart 事件, 这个 TouchList 对象列出在此次事件中新增加的触点。
- 对于 touchmove 事件，列出和上一次事件相比较，发生了变化的触点。
- 对于 touchend 事件，changedTouches 是已经从触摸面的离开的触点的集合（也就是说，手指已经离开了屏幕/触摸面）。

三、功能案例

1. 检测滑动方向

// html、style 结构同上
function directionMonitor() {let body = document.getElementsByTagName("body")[0];let startX, startY, endX, endY;body.addEventListener("touchstart", function (e) {startX = e.targetTouches[0].pageX;startY = e.targetTouches[0].pageY;});body.addEventListener("touchend", function (e) {endX = e.changedTouches[0].pageX;endY = e.changedTouches[0].pageY;let horizontalStatus = endX > startX ? "向右滑动" : "向左滑动";let verticalStatus = endY > startY ? "向下滑动" : "向上滑动";console.log(`当前的操作：${horizontalStatus},${verticalStatus}`);});
}

2. 实现元素拖拽

在实现这个功能的时候，一直找不到怎么获取相对位置，幸好小硅壳博主相关文章介绍，点击跳转

实现关键，获取触控点位于触控元素上的位置。

<style>* {margin: 0;padding: 0;}body,.touch {width: 100vw;height: 100vh;background-color: #2c3e50;overflow: hidden;}.touch .touch-item {position: absolute;width: 100px;height: 100px;background-color: #2980b9;}
</style>
<div class="touch"><div class="touch-item"></div>
</div>
<script>function dragMonitor(dragDom) {let touchItem = document.querySelector(dragDom);let relativeX = 0;let relativeY = 0;touchItem.addEventListener("touchstart", function (eStart) {relativeX = eStart.targetTouches[0].pageX - this.offsetLeft;relativeY = eStart.targetTouches[0].pageY - this.offsetTop;});touchItem.addEventListener("touchmove", function (eMove) {let moveX = eMove.targetTouches[0].pageX - relativeX;let moveY = eMove.targetTouches[0].pageY - relativeY;this.style.left = moveX + "px";this.style.top = moveY + "px";});}dragMonitor(".touch-item");
</script>

3. 实现元素旋转

实现关键：方位角，其是计算两点间的偏移角度。返回弧度单位值。

// 在javascript中提供了Math.atan2()函数
Math.atan2(终点y - 起点y, 终点x - 起点x);

function rotateMonitor(dragDom) {let touchItem = document.querySelector(dragDom);let startX, startY;touchItem.addEventListener("touchstart", function (eStart) {startX = eStart.targetTouches[0].pageX;startY = eStart.targetTouches[0].pageY;});touchItem.addEventListener("touchmove", function (eMove) {let moveX = eMove.targetTouches[0].pageX,moveY = eMove.targetTouches[0].pageY;this.style.transform = `rotate(${getAngle(startX, startY, moveX, moveY)}deg)`;});function getAngle(p1X, p1Y, p2X, p2Y) {let x = p2X - p1X,y = p2Y - p1Y;return (Math.atan2(y, x) / Math.PI) * 180;}
}
dragMonitor(".touch-item");

原文：http://blog.sina.com.cn/s/blog_468530a60102wzkw.html
出处：https://www.cnblogs.com/mengff/p/6005516.html

盒子拖拽效果：https://blog.csdn.net/weixin_50794208/article/details/113858299

总结

综上，便是今天所介绍的全部内容，在触摸事件中，需要区分 touches、targetTouches、changedTouches，三个 TouchList 列表。感兴趣的可以拷贝 demo 运行查看结果。

最后，如果您有更好的方法，欢迎在留言区中分享；或者实际操作中遇到什么问题均可留言或者私信我，感谢您的观看！

参考博客：
等风来 - touch 事件中的 touches、targetTouches 和 changedTouches 详解
小硅壳 - 原生 js 小案例：移动端触屏拖动元素

touch触摸事件以及常用触摸功能相关推荐

ios实例开发精品文章推荐（8.12）11个处理触摸事件和多点触摸的JS库
11个处理触摸事件和多点触摸的JS库触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的Web应用,我们需要借助浏览器的触摸事件来实现. ...
html 禁止触摸事件,html5的触摸事件
1.触摸事件有哪些 touchstart,touchmove,touchend 2.分别什么时候触发 touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touc ...
Android 6种触摸事件,Android 的触摸事件详解及示例代码
由于触摸(Touch)而触发的事件 Android的事件:onClick, onScroll,onFling等等,都是由许多个Touch组成的.其中Touch的第一个状态肯定是ACTION_DOWN, ...
iOS开发系列--触摸事件、手势识别、摇晃事件、耳机线控
-- iOS事件全面解析概览 iPhone的成功很大一部分得益于它多点触摸的强大功能,乔布斯让人们认识到手机其实是可以不用按键和手写笔直接操作的,这不愧为一项伟大的设计.今天我们就针对iOS的触摸事 ...
为了讲清楚Android触摸事件，我“拆了部手机”
Android 是一个有用户界面(GUI)的操作系统,在它诞生之初,就是为带有触摸屏的手持设备准备的.作为提供给用户最重要的交互方式之一,了解触摸系统是怎么工作的,对于实际的项目开发有着非常大的帮助. ...
iOS事件全面解析 (触摸事件、手势识别、摇晃事件、耳机线控)
-- iOS事件全面解析概览 iPhone的成功很大一部分得益于它多点触摸的强大功能,乔布斯让人们认识到手机其实是可以不用按键和手写笔直接操作的,这不愧为一项伟大的设计.今天我们就针对iOS的触摸事 ...
iOS：触摸事件、手势识别、摇晃事件、耳机线控
概览 iPhone的成功很大一部分得益于它多点触摸的强大功能,乔布斯让人们认识到手机其实是可以不用按键和手写笔直接操作的,这不愧为一项伟大的设计.今天我们就针对iOS的触摸事件(手势操作).运动事件. ...
触摸事件、手势识别、摇晃事件、耳机线控
概览 iPhone的成功很大一部分得益于它多点触摸的强大功能,乔布斯让人们认识到手机其实是可以不用按键和手写笔直接操作的,这不愧为一项伟大的设计.今天我们就针对iOS的触摸事件(手势操作).运动事件. ...
转载大神IOS开发系列【9】--触摸事件、手势识别、摇晃事件、耳机线控
转载自:http://www.cnblogs.com/kenshincui/p/3950646.html 概览 iPhone的成功很大一部分得益于它多点触摸的强大功能,乔布斯让人们认识到手机其实是可以 ...

touch触摸事件以及常用触摸功能

文章目录

前言

一、触摸事件

二、事件对象 event

三、功能案例

1. 检测滑动方向

2. 实现元素拖拽

3. 实现元素旋转

总结

touch触摸事件以及常用触摸功能相关推荐

最新文章

热门文章

touch触摸事件以及常用触摸功能

文章目录

前言

一、触摸事件

二、 事件对象 event

三、 功能案例

1. 检测滑动方向

2. 实现元素拖拽

3. 实现元素旋转

总结

touch触摸事件以及常用触摸功能相关推荐

最新文章

热门文章

二、事件对象 event

三、功能案例