js移动端触摸事件

最新推荐文章于 2023-12-25 12:37:34 发布

SpaceX7_s

最新推荐文章于 2023-12-25 12:37:34 发布

阅读量402

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45842954/article/details/122282312

版权

这篇博客详细介绍了如何利用touchstart、touchmove和touchend事件在移动端实现DOM元素的拖动效果。通过监听这些触摸事件，获取手指在屏幕上的位置变化，并更新元素的坐标，从而达到拖动的效果。同时，使用event.preventDefault()防止了页面的默认滚动行为。

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

touchstart : 手指触摸dom元素事件
tochmove ：手指拖动dom元素事件
touchend :手指离开dom元素事件
事件对象重要的三个触摸列表
touches 触摸屏幕上所有触摸点(手指)的列表
targetTouches dom元素上所有触摸点的列表
changeTouches 手指状态发生了改变，从无到有，从有到无的变化

例子：移动盒子

<script>
        window.addEventListener('load',function(){
            var box = document.querySelector('div');
            var startX = 0;//手指的初始位置
            var startY = 0;
            var x = 0;//盒子的初始位置
            var y = 0;
            box.addEventListener('touchstart',function(event){
                 startX = event.targetTouches[0].pageX;
                 startY = event.targetTouches[0].pageY
                 x = this.offsetLeft;
                 y = this.offsetTop;
                 
            })
            box.addEventListener('touchmove',function(event){
                var endX = event.targetTouches[0].pageX;
                var endY = event.targetTouches[0].pageY;
                box.style.left = endX - startX + x +'px';
                box.style.top = endY - startY + y + 'px';
                event.preventDefault();//防止屏幕滚动的默认行为
            })
        })
    </script>