移动端介绍
//1 不用考虑兼容性问题 可以放心的使用原生JS //2 能用CSS3的就用c3
//3 会有独特的地方 如触屏事件
一 触屏事件
1）常见事件
//1 touchstart 手指触摸事件 //2 touchmove 手指滑动事件 //3 touchend 手指移出事件
2）代码范例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>touch事件</title> <style> div { 100px; height: 100px; background: pink; } </style> </head> <body> <div></div> <script> var div = document.querySelector('div'); // 1. 手指触摸DOM元素事件 div.addEventListener("touchstart", function () { console.log('手指触摸事件'); }); //2. 手指滑动触发 div.addEventListener('touchmove',function () { console.log('手指滑动事件'); }); // //3 手指离开触发 div.addEventListener('touchend',function () { console.log('我离开了'); }); </script> </body> </html>
二 触摸对象 TouchEvent
1） 常见属性
//1 touchs 正在触摸屏幕的所有手指的列表 //2 targetTouches 正在触摸当前DOM元素的手指列表 [ 最常用 ]
//3 changeTouches 手指侦听发生了改变的列表 (从无到右、从有到无)
2）三者的区别
//1 手指离开事件 只有 changeTouches 可以获取到
//2 如果侦听的是一个DOM元素 touchs 和 targetTouches 一样
3）获取到某个手指的信息
//1 e.targetTouches[0] 得到正在触摸DOM元素的 第一个手指的相关信息
//比如手指的坐标
三 移动端拖动元素
1）基础知识
//1 touchstart touchmove touchend 可以实现拖动元素 //2 获取当前手指的坐标值 targetTouches[0].pageX
//e.preventDefault();//阻止屏幕默认的滚动行为
2）拖动元素三部曲
//1 触摸元素 touchstart 获取手指初始坐标 同时获得盒子原来的位置
//2 移动手指 touchmove 计算手指的滑动距离 并且移动盒子
//3 离开手指 touchend
手指移动也会触发滚动屏幕 所以要阻止默认的屏幕滚动 e.preventDefaule();
3）代码范例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>移动端拖动元素</title> <style> div { position: absolute; left: 0; 100px; height: 100px; background-color: pink; } </style> </head> <body> <div></div> <script> // （1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置 // （2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子 // （3） 离开手指 touchend: var div = document.querySelector('div'); var startX = 0;//声明手指的初始做标 var startY = 0; var x = 0;//声明盒子原来的位置 var y = 0; //1 触摸手指 div.addEventListener('touchstart',function (e) { //拿到第一个手指坐标值 startX = e.targetTouches[0].pageX; startY = e.targetTouches[0].pageY; //拿到盒子的初始位置 x = this.offsetLeft; y = this.offsetTop; }); //2 移动手指 div.addEventListener('touchmove',function(e){ //计算手指的移动距离 = 手指移动之后的坐标 - 移动之前的坐标 var moveX = e.targetTouches[0].pageX - startX;//e.targetTouches[0].pageX 得到移动手指移动后的x坐标 var moveY = e.targetTouches[0].pageY - startY; //移动盒子 = 盒子原来的位置 + 手指移动的距离 this.style.left = x + moveX + 'px'; this.style.top = x + moveY + 'px'; e.preventDefault();//阻止屏幕默认的滚动行为 }); </script> </body> </html>