移动端事件

1、

touchstart  开始触摸

touchmove 在屏幕上滑动

touchend  移动结束

    <script>        var div = document.querySelector("div")        // 移动端事件 -- touch事件        // 在移动端没有鼠标点击事件！！！        div.addEventListener("touchstart", function(e) {            console.log(e.targetTouches[0].pageX)            console.log(e.targetTouches[0].pageY)            console.log("开始触摸屏幕！！！")        })        div.addEventListener("touchmove", function() {            console.log("在触摸屏上进行移动！！！，这是一个连续触发事件！！！")        })        div.addEventListener("touchend", function() {            console.log("手指从触摸屏上离开了")        })    </script>

2、移动元素的拖拽

 <script>        var div = document.querySelector(".box")        var startX = 0        var startY = 0        var offsetX = 0;        var offsetY = 0;        div.addEventListener("touchstart", function(e) {            // console.log("div")            startX = e.targetTouches[0].pageX   手指距离window边缘位置            startY = e.targetTouches[0].pageY            // 求到手指在盒子里面的距离            offsetX = startX - div.offsetLeft            offsetY = startY - div.offsetTop        })        div.addEventListener("touchmove", function(e) {            console.log("chufa")            // 求出手指新的坐标值            var newX = e.targetTouches[0].pageX这个是 移动后盒子的位置            var newY = e.targetTouches[0].pageY            var leftX = newX - offsetX    这个是移动后盒子的位置减去手指在盒子里的
位置  就得到盒子距离window边缘的位置            var leftY = newY - offsetY            console.log(leftX)            console.log(leftY)            this.style.left = leftX + "px"            this.style.top = leftY + "px"            e.preventDefault()        })    </script>