移动端事件——移动端滑屏切换的幻灯片

Posted jfen625

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端事件——移动端滑屏切换的幻灯片相关的知识，希望对你有一定的参考价值。

在我们开始用原声JS写移动端轮播前，我们先了解一些移动端的基础。

　　　　touch事件、touchEvents对象、滑屏的思想与实现

移动端touch事件

  • touchstart

  • touchmove

  • touchend

let box = document.querySelector("#box");
    /*
        touchstart --> mousedown 
            手指触碰元素
        touchmove --> mousemove
            手指触碰元素之后,在屏幕中移动
        touchend --> mouseup
            手指触碰元素之后,从屏幕上抬起
    */
    box.addEventListener("touchstart",()=>{
        console.log("手指触碰")
    });
    box.addEventListener("touchmove",({target})=>{
        console.log("手指移动",target)
    });
    box.addEventListener("touchend",()=>{
        console.log("手指抬起")
    });

  • touch 事件 和 mouse 事件的区别

{
    let box = document.querySelector("#box");
    box.addEventListener("mouseup",()=>{
        console.log("鼠标抬起");// 移动端也支持 mouse 事件
        console.timeEnd(1);
    });
    box.addEventListener("touchend",()=>{
        console.log("手指抬起");// PC 端不支持 touch 事件
        console.time(1);
    });
    
}
  • 事件点透

    • touch 事件本身没有延迟，触发之后立马执行，另外浏览器会记录当前的一个点击位置，延迟一段时间，在该坐标找到相应的元素，如果元素有 mouse 事件，就执行
      解决方案：
      1. 给 touch 事件 加延迟
      2. 绝对不在页面使用 mouse 事件
      3. 阻止默认事件

    • mouse 事件的延迟问题
let box = document.querySelector("#box");
// box.addEventListener("touchend",()=>{
//     setTimeout(()=>{
//         box.style.display = "none";
//     },300);
// });
box.addEventListener("touchend",(e)=>{
    box.style.display = "none";
    // setTimeout(()=>{
    //     box.style.display = "none";
    // },300);
    e.preventDefault();
});
  •  阻止默认事件

    • 　　阻止 touchstart 事件带来的影响

    • 　　阻止 touchmove 事件带来的影响

document.addEventListener("touchmove",(e)=>{
        e.preventDefault();
    },{
        passive:false // true 不允许阻止默认事件 ,false 允许阻止默认事件
    });
    // txt.addEventListener("touchstart",()=>{
    //     txt.focus();
    // })

阻止 touchstart 默认事件带来的危害：
1. 所有的 mouse 事件,全部都会失效(包括a标签的href)
2. 滚动条不能拖动
3. 没有办法获得焦点和失去焦点
4. 多指不能缩放页面
5. 长按选中会被阻止，系统菜单也会被阻止

阻止 touchmove 默认事件带来的危害:
1. 滚动条不能拖动
2. 多指不能缩放页面

 

TouchEvent 对象详解

  • touches 当前屏幕上的手指列表

  • targetTouches 当前元素上的手指列表

  • changedTouches 触发当前事件的手指列表

 

滑屏

  • 构思

    1. 　　摁下时，记录手指坐标和元素坐标

    2. 　　移动后，获取手指新坐标

    3. 　　计算手指移动距离 = 用移动后的手指 - 摁下时手指坐标

    4. 　　移动后的元素位置 = 手指移动距离 + 摁下时元素的坐标

  • 实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        #box {
            position: fixed;
            left: 0;
            top: 20%;
            width: 100vw;
            height: 50%;
            overflow: -hidden;
            border: 1px  solid red;
        }
    </style>
</head>
<body>
<div id="box">

</div>
<script>

// 滑屏实现
{
    let box = document.querySelector("#box");
    let translateY = 0; // 元素的位置 
    let startY = 0; // 记录摁下时元素的位置
    let startOffset = 0; // 记录摁下时手指坐标
    let list = document.querySelector("#list");
    box.addEventListener("touchstart",({changedTouches})=>{
        startY = translateY;
        startOffset = changedTouches[0].pageY;
    });
    box.addEventListener("touchmove",({changedTouches})=>{
        let nowOffset = changedTouches[0].pageY;//当前手指坐标
        let disOffset = nowOffset - startOffset;//手指移动距离
        translateY = disOffset + startY;
        list.style.transform = `translateY(${translateY}px)`
    });

}
</script>
</body>
</html>

 

因为俺也是在学，如果有遇到什么bug，欢迎和俺一块探讨。

以上是关于移动端事件——移动端滑屏切换的幻灯片的主要内容，如果未能解决你的问题，请参考以下文章

移动端滑屏事件

H5案例分享：移动端滑屏 touch事件

移动端滑屏全应用滑屏封装注意事项与移动端轮播

移动端滑屏组件

移动端滑屏全应用移动端动画贞动画函数mTween封装

移动端滑屏全应用requestAnimationFrame的兼容与使用