课程名称： 前端工程师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小时，前面先学习了上节课余下的内容，希望能够早日走上正轨，早点找工作！