在移动端，浏览器具有良好的兼容性，所以原生 js 的书写效果可以在移动端使用，我们知道移动端最大的特点就是 可以直接用手指触发事件，因此就需要用到触屏事件。
touch对象是一个触摸点，这个触摸点可以是一个手指，也可以是触摸笔。触屏事件可以响应用户手指或者触摸笔对屏幕或者触控板的操作。
触屏事件包括以下三种：
这是一类描述手指在触摸平面（屏幕、触摸板等）状态变化的事件。这类事件用于描述一个或多个触点，使得开发者更容易检测触点的移动、增加、减少等。
<body>
<div></div>
<script>
var div = document.querySelector('div');
div.addEventListener('touchstart', function(e) {
console.log('我被摸了');
// touches 正在触摸屏幕的所有手指列表
console.log(e);
// targetTouches正在触摸当前DOM元素的手指列表 最常用
// 如果监听的是一个DOM元素 则他们两个是一样的
// changedTouches 手指状态发生了改变的列表 从有到无 从无到有
console.log(e.targetTouches[0]);
// 上面得到的是当前正在触摸元素的第一个手指信息,包括触摸点距离页面的坐标、距离屏幕的坐标等
});
div.addEventListener('touchmove', function() {
console.log('手指在盒子上移动');
});
div.addEventListener('touchend', function(e) {
console.log(e);
// 当手指离开屏幕的时候,就没有touches 和 targetTouches 但是会有 changedTouches
})
</script>
</body>
手指离开时触发 touchend的事件
以前做过开关灯的案例，如下：
<body>
<button id="btn">开关</button>
<script>
var btn = document.getElementById('btn');
var body = document.querySelector('body');
var flag = false;
btn.onclick = function() {
if (flag === false) {
body.style.backgroundColor = 'black';
flag = true;
} else {
body.style.backgroundColor = 'white';
flag = false;
}
}
</script>
</body>
当鼠标点击开关后，页面背景颜色由白色变为黑色，或者由黑色变为白色，实现一种开关灯的效果。在这里需要用到一个变量 flag 来判断当前元素是否有这个属性或类，实现循环点击改变背景颜色的效果，显然这样做代码比较多。移动端就使用了 classList 属性，方便的实现属性的添加（ element.classList.add() ）、移除（ element.classList.remove() ）、切换（ element.classList.toggle() 如果有这个类就删除，如果没有这个类就添加）。
下面利用classList属性实现开关灯和添加、移除某个类名：
<body>
<div class="one two"></div>
<button>开关灯</button>
<script>
// classList 返回元素的类名
var div = document.querySelector('div');
var btn = document.querySelector('button');
console.log(div.classList[1]);
// 1.添加类名 实在后面追加类名，不会覆盖原来的类名 前面不需要加 .
div.classList.add('three');
// console.log(div.classList);
// 2.移除某个类名
// div.classList.remove('one');
// 3.切换类 如果有这个类就删除 没有就添加
btn.addEventListener('click', function() {
document.body.classList.toggle('bg');
// .bg 这个类的样式已经写在<style></style>标签内
});
</script>
</body>
<!DOCTYPE html>
<html>
<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;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
// 手指移动会触发滚动屏幕，所以要阻止默认滚动屏幕e.preventDefault()
<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;
// 盒子移动的距离 = 盒子原来的位置 + 手指移动的距离
// 盒子加了定位 就通过修改 left 和 top 值进行移动
this.style.left = x + moveX + 'px';
this.style.top = y + moveY + 'px';
e.preventDefault();
});
</script>
</body>
</html>
原因：移动端与WEB端不同，移动端浏览网站页面时可能会比较小，看不清，这时用户就会用手指放大页面，浏览完成以后在屏幕被双击（double tap to zoom）就可以缩放页面，因此在手指点击屏幕一次时，内部程序会等待 300ms ，看是否在这段时间之内还有下一次点击，这就导致了点击一次会有延时效果。
解决方案
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />//封装一个函数
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) {
// 没有滑动 并且 时间差小于 150ms 则视为点击事件
if(!isMove && (Date.now() - startTime) < 150){
callback && callback(); // 执行回调函数
}
isMove = false; // 取反 重置
startTime = 0;
});
}
// 调用
tap(div, function() {
// 这里放执行代码
});
本地存储的特性：
① 数据存储在用户浏览器中
② 设置读取方便，甚至页面刷新也不会丢失数据
③ 容量较大，window.sessionStorage 5M 左右
window.loginStorage 20M左右
window.sessionStorage
特性：
① 生命周期到关闭浏览器窗口为止
② 在同一个窗口或页面下数据可以共享
③ 数据以键值对的形式存储使用
存储数据的方法：
??????sessionStorage.setItem(key, value)
获取数据的方法：
??????sessionStorage.getItem(key)
删除数据的方法：
??????sessionStorage.removeItem(key)
清除所有数据的方法：
??????sessionStorage.clear()
window.loginStorage
特性：
① 生命周期永久生效，除非手动删除，否则关闭页面也会存在
② 可以多个窗口或页面共享，同一个浏览器也可以共享
③ 以键值对的形式存储数据
存储数据、获取数据、删除数据的方法类似window.sessionStorage，这里不再赘述。
事务 事务就是一组sql语句为了保证一组数据库操作要么全部成功要么全部失败。 事...
前言 此控件直接进行打印底部会有水印，通过官网购买可以解决； 如不想购买，可...
问题 今天安装了IDEA2019.03版本，在安装插件时搜索不到插件： 解决 点击右上角...
前言 我们前几篇讲了索引是什么，如何使用explain分析索引使用情况，如何去优化...
之前，我们写了一篇有关 Ansible 安装和配置 的文章。在那个教程中只包含了一些...
如何在 ADSI 中查询用户属性？ % Dim x On error resume next 'Set x = GetObjec...
第一种使用正则表达式判断 //是否是纯数字 + (BOOL)isNumText:(NSString *)str{ ...
在php中有一些函数，是为了数组的使用而辅助的。本篇要提到的是get_object_vars(...
动态域名解析，或 DNSR ，通常用于解析 IP 地址经常变化的域名。电信网络提供了...
想了解更多内容，请访问： 51CTO和华为官方战略合作共建的鸿蒙技术社区 https://...
