js移动端触摸事件

Posted 2022-01-28 做个机灵鬼

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>