javascript 移动端 触屏事件touch

触屏事件 touch

  • touch 对象代表一个 触摸点 触摸事件可响应用户手指 或触控笔对屏幕或触控板操作
    常见触屏事件
    javascript 移动端 触屏事件touch_第1张图片
script>
        var div = document.querySelector('div')
        div.addEventListener('touchstart',function(){
            console.log('touchstar 触摸事件');
        })
        div.addEventListener('touchmove',function(){
            console.log('touchmove 触摸移动事件');
        })
        div.addEventListener('touchend',function(){
            console.log('touchend 松开');
        })

    </script>

javascript 移动端 触屏事件touch_第2张图片

触摸事件对象

javascript 移动端 触屏事件touch_第3张图片

移动端 拖动元素

  • touchstart 、 touchmove 、 touchend 可以实现拖拖动元素
  • 但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的pageX 和 pageY
  • 移动端拖动的原理:手指移动中计算出 手指移动的距离 然后用盒子原来的位置 + 手指移动距离
  • 手指移动距离:手指滑动中的位置 减去 手指刚开始触摸的位置

拖动元素三部曲
1.触摸元素touchstart :获得手指最初做标 同时获得盒子原来位置
2.移动手指 touchmove 计算手指的滑动距离 并且 移动盒子
3.手指离开 touchend
手指移动 也会触发滚动屏幕 要阻止默认的屏幕滚动 e.preventDefault ( )
移动元素 要加定位

	<style>
        div{
            position: relative;
            width: 100px;
            height: 100px;
            background-color:pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 触摸元素 获得手指初始坐标 touchstart 获取手指初始坐标 同时获得盒子原来的位置
        // 移动手指 touchmove  计算手指的滑动距离 并移动盒子
        // 手指离开  touchend
        var div = document.querySelector('div')
        var starX = 0  // 获得手指最出位置
        var starY = 0
        var x = 0   // 获得盒子原来位置
        var y = 0
        div.addEventListener('touchstart',function(e){
            // 获取手指最初坐标s
            starX = e.targetTouches[0].pageX
            starY = e.targetTouches[0].pageY
            x = this.offsetLeft
            y = this.offsetTop
        } )
        div.addEventListener('touchmove',function(e){
            // 移动手指 计算距离 手指移动的坐标 减去最初坐标
            var moveX = e.targetTouches[0].pageX - starX
            var moveY = e.targetTouches[0].pageY - starY
            // 移动盒子  盒子原来的位置 加上手指移动的距离
            this.style.left = x +moveX + 'px'
            this.style.top = y +moveY + 'px'
            e.preventDefault() // 阻止默认的屏幕滚动
        } )
    </script>

你可能感兴趣的:(JavaScript,javascript,开发语言,ecmascript)