JS-PC/MOBILE技巧--MOBILE

二、移动端网页特效

1、触屏事件

触摸事件概述

常见的触屏事件：

触屏touch事件说明
touchstart 手指触摸到一个 DOM 元素是触发
touchmove 手指在一个 DOM 元素上滑动时触发
touchend 手指从一个 DOM 元素上移开时触发

触屏touch事件	说明
touchstart	手指触摸到一个 DOM 元素是触发
touchmove	手指在一个 DOM 元素上滑动时触发
touchend	手指从一个 DOM 元素上移开时触发

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><div></div><script>var div = document.querySelector('div');div.addEventListener('touchstart', function() {console.log('I touched you.');})div.addEventListener('touchmove', function() {console.log('I touch you again.');})div.addEventListener('touchend', function() { console.log('I don`t touch you.');})</script>
</body>
</html>

触摸事件对象（TouchEvent）

常见触摸事件对象：

触摸列表说明
touches 正在触摸屏幕的所有手指的一个列表
targetTouches 正在触摸当前 DOM 元素上的手指的一个列表
changedTouches 手指状态发生了改变的列表，从无到有、从有到无的改变

触摸列表	说明
touches	正在触摸屏幕的所有手指的一个列表
targetTouches	正在触摸当前 DOM 元素上的手指的一个列表
changedTouches	手指状态发生了改变的列表，从无到有、从有到无的改变

移动端拖动元素

当前手指的坐标值：可以使用 targetTouches[0] 里面的 pageX 和 pageY
移动端拖动距离：盒子原来的位置 + 手指移动的距离
手指移动的距离：手指滑动中的位置 - 手指刚开始触摸的位置

注意：手指移动会触发滚动屏幕，所以要阻止默认的屏幕滚动 e.preventDefault();

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {position: absolute;left: 0;width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><div></div><script>var div = document.querySelector('div');// 手指初始坐标var startX = 0;var startY = 0;// 盒子原来的位置var x = 0;var y = 0; div.addEventListener('touchstart', function(e) {startX = e.targetTouches[0].pageX;startY = e.targetTouches[0].pageY;x = this.offsetLeft;y = this.offsetTop;})div.addEventListener('touchmove', function(e) {// 手指移动距离var moveX = e.targetTouches[0].pageX - startX;var moveY = e.targetTouches[0].pageY - startY;this.style.left = x + moveX + 'px';this.style.top = y + moveY + 'px';e.preventDefault(); })</script>
</body>
</html>

2、移动端常见特效

classList 属性

classList 属性是 HTML5 新增的一个属性，返回元素的类名，但是 ie10 以上版本才支持。

该属性用于在元素中添加、移除及切换 CSS 类：

添加：
element.classList.add('类名');

移除：
element.classList.remove('类名');

切换:
element.classList.toggle('类名');

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.bg {background-color: black;}</style>
</head>
<body><div class="one two"></div><button>开关灯</button><script>var div = document.querySelector('div');// console.log(div.classList[1]);// 1.添加div.classList.add('three');// 2.移除div.classList.remove('one');// 3.切换var btn = document.querySelector('button');btn.addEventListener('click', function() {document.body.classList.toggle('bg');})</script>
</body>
</html>

click 延时解决方案

移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放 (double tap to zoom) 页面。

禁用缩放
<meta name="viewport" content="user-scalable=no">

利用 touch 事件自己封装这个事件

记录触摸事件
用结束触摸事件减去触摸时间
若该时间超过150ms，并且没有滑动屏幕，则认为点击

// 封装tap, 解决 click 300ms 延时
function tap(obj, callback) {var isMove = false;var startTime = 0; // 触摸时间obj.addEventListener('touchstart', function(e) {startTime = Date.now();});obj.addEventListener('touchmove', function(e) {isMove = true; // 是否有滑动})；obj.addEventListener('touchend', function(e) {if (!isMove && (Date.now() - startTime) < 150) {callback && callback();}isMove = false;startTime = 0;});
}
tap(div, function() {...})

3.使用插件：fastclick

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 50px;height: 50px;background-color: pink;}</style><script src="fastclick.js"></script>
</head>
<body><div></div><script>if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}, false);}var div = document.querySelector('div');div.addEventListener('click', function() {alert(1);})</script>
</body>
</html>