网上的代码杂七杂八, 我搞个简单明了的!! 你们直接复制粘贴, 手机上 电脑上 可以直接测试!!!
上图:
上代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>记录用户行为</title> <style> * { padding: 0; margin: 0; color: #ccc; } </style> </head> <body> <div id="app"> <h1 v-for="item in 40">滑动我试试看{{item}}</h1> </div> <!-- 思路: 区分 点击和滑动, 关键在于 touchmove 事件; 只有滑动,touchmove中才能获取到 坐标值; 然后通过 touchend中 判断 touchmove是否获取到值, 从而来判断是否是滑动, 重点:touchend 后 把 touchmove获取到 坐标值 去除; --> </body> </html> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { x: '',//touchStart记录的坐标 y: '',//touchStart记录的坐标 touchMove_y: ''//touchMove_y != '' 是滑动 touchMove_y == '' 是点击 }, methods: { toHot() { location.href = './2222.html' }, touchSatrtFunc(evt) { try { var touch = evt.touches[0]; //获取第一个触点 this.x = Number(touch.pageX); //页面触点X坐标 this.y = Number(touch.pageY); //页面触点Y坐标 } catch (e) { console.log('touchSatrtFunc：' + e.message); } }, touchMoveFunc(evt) { try { var touch = evt.touches[0]; var x = Number(touch.pageX); var y = Number(touch.pageY); console.log(x, y) // 判断是否滑动还是点击, this.touchMove_y == ''是点击 this.touchMove_y != '' 是滑动 this.touchMove_y = y } catch (e) { alert('touchMoveFunc：' + e.message); } }, touchEndFunc(evt) { try { // 判断是否滑动还是点击, this.touchMove_y == ''是点击 this.touchMove_y != '' 是滑动 console.log(this.touchMove_y == '') if (this.touchMove_y == '') { alert('这是点击') } else { alert('这是滑动', this.y, this.x) this.touchMove_y = '' //记录数据后 修改touchMove_y = '' 重点!!!!!! } } catch (e) { console.log('touchSatrtFunc：' + e.message); } }, bindEvent() { document.addEventListener('touchstart', this.touchSatrtFunc, false); document.addEventListener('touchmove', this.touchMoveFunc, false); document.addEventListener('touchend', this.touchEndFunc, false); } }, mounted() { this.bindEvent() } }) </script>