课程名称： 前端工程师2022版
课程章节：移动端事件
主讲老师：Alex
课程内容：
今天学习的内容包括：
一、touch事件
2-1 Touch基础事件
1、touch事件的类型
touchstart 触碰时触发
touchend手指抬起时触发
touchmove点击后移动触发
touchcanlel触碰未结束同时有意外情况打断时触发
touchcancel和touchend两个只会有一个发生
练习：
1、添加div元素并设置样式（与效果视频中基本一致即可）
2、获取div元素绑定touch事件
3、开始触摸时div元素背景颜色变为绿色，触摸移动时div元素背景颜色变为蓝色，触摸结束时div元素背景颜色变为粉色
<div class="box" id="box"></div>
<script>
const Box = document.getElementById('box')
Box.addEventListener('touchstart',handleStart,false)
Box.addEventListener('touchmove',handleMove,false)
Box.addEventListener('touchend',handleEnd,false)
Box.addEventListener('touchcancel',handleCancel,false)
function handleStart(){
console.log('touchstart');
Box.style.backgroundColor = 'green';
};
function handleMove(){
console.log('touchmove');
Box.style.backgroundColor = 'blue';
};
function handleEnd(){
console.log('touchend');
Box.style.backgroundColor = 'pink';
};
function handleCancel(){
console.log('touchcancel');
Box.style.backgroundColor = 'grey';
};
// Box.addEventListener('touchstart',()=> {
// console.log('touchstart');
// })
</script>2、注意事项
①Touch 事件在 PC 端不会触发，鼠标事件在 PC 端和移动端都会触发
②即使触摸点移出目标元素，touchmove 事件依然会持续触发，mousemove 事件不会再触发
③Touch 事件的特征检测（判断浏览器支不支持 Touch 事件）
2-2Touch事件的event对象
1、touch事件里的event 对象的常用属性
type 事件类型
target 目标元素
touches 屏幕上的所有触摸点
targetTouches 起始于目标上的所有触摸点
changedTouches 事件触发时，状态发生了改变的所有触摸点
2、触摸点的常用属性
identifier 触摸点id（唯一标识符）,一般多指触摸有用
target 目标元素
screenX/screenY 触点相对于屏幕左边缘的X、Y坐标
clientX/clientY 触点相对于可视区域左边缘的X、Y坐标。不包括任何滚动偏移
pageX/pageY 触点相对于 HTML 文档左边缘的X、Y坐标。包括滚动偏移
练习：
任务要求：
1、添加div元素并设置样式，输出的值可以放在三个空标签中
2、获取div元素和空标签元素，并在div元素上绑定touch事件
3、在绑定的事件中获取event对象，并获取pageX和pageY位置
4、将获取的位置值填充到空标签元素中
<div class="box" id="box"></div>
<p id="text1"></p>
<p id="text2"></p>
<p id="text3"></p>
// 获取盒子和文字元素
const Box = document.getElementById('box');
const Text1 = document.getElementById('text1');
const Text2 = document.getElementById('text2');
const Text3 = document.getElementById('text3');
// 绑定事件
Box.addEventListener('touchstart',startHandler,false);
Box.addEventListener('touchmove',moveHandler,false);
Box.addEventListener('touchend',endHandler,false);
function startHandler(evt) {
// 获取触摸点
const touch = evt.changedTouches[0];
// 获取触摸点的pageX和pageY（取整）
const x = parseInt(touch.pageX);
const y = parseInt(touch.pageY);
Text1.innerHTML = `touch开始的位置：${x},${y}`
};
function moveHandler(evt) {
// 获取触摸点
const touch = evt.changedTouches[0];
// 获取触摸点的pageX和pageY（取整）
const x = parseInt(touch.pageX);
const y = parseInt(touch.pageY);
Text2.innerHTML = `touch移动的位置：${x},${y}`
}
function endHandler(evt) {
// 获取触摸点
const touch = evt.changedTouches[0];
// 获取触摸点的pageX和pageY（取整）
const x = parseInt(touch.pageX);
const y = parseInt(touch.pageY);
Text3.innerHTML = `touch结束的位置：${x},${y}`
}client、page、screen相关属性的区别
clientX、clientY 是相对于视觉视口不带滚动条的坐标；
pageX、pageY 是相对于视觉视口带滚动条的坐标；
screenX、screenY是相对于屏幕的坐标
3、阻止浏览器的默认行为
阻止 scrolling, pinch/zoom, 鼠标事件等默认行为
①可以在 touch 的事件处理函数中使用 evt.preventDefault() 阻止浏览器的所有默认行为
②touch-action 告诉浏览器哪些触摸操作让浏览器处理，阻止其他触摸操作的默认行为。
css属性https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action
/* 处理所有触摸操作 */ touch-action: auto; touch-action: none; /* 全部禁止 */ /* 只支持平移 */ touch-action: pan-x; touch-action: pan-y; /* 只允许进行滚动和持续缩放操作，不允许双击缩放 */ touch-action: manipulation;
课程收获：
学习了触摸事件，知道了触摸的基础事件，以及触摸事件的event对象。
今天学习触摸事件和对象课程共用了50分钟，两个编程作业，写的时候没什么思路，看了别人的就有一种恍然大悟的感觉，应该是还不太会，明天先把今天的两个作业不看答案再写一遍，再把笔记大致过一遍，然后再学习新的内容。
今天一共学习2小时，前面先学习了上节课余下的内容，希望能够早日走上正轨，早点找工作！
随时随地看视频
