移动端事件（一）—— 移动端事件和对象

最新推荐文章于 2024-04-23 11:37:57 发布

白菜new

最新推荐文章于 2024-04-23 11:37:57 发布

阅读量269

点赞数 2

分类专栏：移动端文章标签： javascript

本文链接：https://blog.csdn.net/qq_43850819/article/details/105274941

版权

本文介绍了移动端开发中touch事件的基本概念，包括touchstart、touchmove、touchend，对比了touch事件与mouse事件的区别，并详细讨论了事件点透问题及解决方案。此外，还探讨了阻止默认事件的影响，特别是对mouse事件和触摸事件的影响。最后，讲解了TouchEvent对象的属性如touches、targetTouches、changedTouches，并概述了滑屏效果的实现思路和计算方法。

摘要由CSDN通过智能技术生成

移动端事件（一）—— 移动端事件和对象

在我们开始用原声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("手指抬起")
    });