事件对象touchEvent
触摸事件对象 touchEvent
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
// 触摸事件对象
// 1. 获取元素
// 2. 手指触摸DOM元素事件
var div = document.querySelector("div");
div.addEventListener("touchstart", function (e) {
// console.log(e);
// touches 正在触摸屏幕的所有手指的列表
// targetTouches 正在触摸当前DOM元素的手指列表
// 如果侦听的是一个DOM元素, 他们两个是一样的
// changedTouches 手指状态发生了改变的列表 从无到有 或者 从有到无
// 因为我们一般都是触摸元素 所以最经常使用的是 targetTouches
console.log(e.targetTouches[0]);
// targetTouches[0] 就可以得到正在触摸dom元素的第一个手指的相关信息比如 手指的坐标等等
});
// 3. 手指在DOM元素身上移动事件
div.addEventListener("touchmove", function () {});
// 4. 手指离开DOM元素事件
div.addEventListener("touchend", function (e) {
// console.log(e);
// 当我们手指离开屏幕的时候, 就没有了 touches 和 targetTouches 列表
// 但是会有 changedTouches
});
</script>
</body>
</html>