JavaScript十二 - 移动端触摸事件

15.1 移动端常见特效

15.1.1 案例讲解-携程移动端轮播图

移动端轮播图

1.引入相关js 文件
2.复制HTML 结构
3.修改对应样式
4.修改相应JS 参数

15.2 classList属性

15.2.1 概述

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

该属性用于在元素中添加，移除及切换 CSS 类。有以下方法

添加类：

element.classList.add（’类名’）；

focus.classList.add('current');

移除类：

element.classList.remove（’类名’）;

focus.classList.remove('current');

切换类：

element.classList.toggle（’类名’）;

focus.classList.toggle('current');

注意:以上方法里面，所有类名都不带点

15.2.2 案例讲解-携程移动端轮播图改进

  1. 手指滑动轮播图
  2. 本质就是ul跟随手指移动，简单说就是移动端拖动元素
  3. 触摸元素touchstart： 获取手指初始坐标
  4. 移动手指touchmove： 计算手指的滑动距离，并且移动盒子
  5. 离开手指touchend: 根据滑动的距离分不同的情况
  6. 如果移动距离小于某个像素 就回弹原来位置
  7. 如果移动距离大于某个像素就上一张下一张滑动。
  8. 滑动也分为左滑动和右滑动判断的标准是 移动距离正负 如果是负值就是左滑 反之右滑
  9. 如果是左滑就播放下一张 （index++）
  10. 如果是右滑就播放上一张 (index--)

15.2.3 案例讲解-返回顶部

当页面滚动某个地方，就显示，否则隐藏

点击可以返回顶部

15.3 click延迟解决方案

15.3.1 产生原因

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

解决方案：

  1. 禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。
<meta name="viewport" content="user-scalable=no">

2.利用touch事件自己封装这个事件解决300ms 延迟。

原理就是：

  1. 当我们手指触摸屏幕，记录当前触摸时间
  2. 当我们手指离开屏幕， 用离开的时间减去触摸的时间
  3. 如果时间小于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) {  // 如果手指触摸和离开时间小于150ms 算点击
                callback && callback(); // 执行回调函数
            }
            isMove = false;  //  取反 重置
            startTime = 0;
        });
}
//调用  
  tap(div, function(){   // 执行代码  });
  1. 使用插件。fastclick 插件解决300ms 延迟。

15.3.2 禁用缩放

禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。

<meta name="viewport" content="user-scalable=no">

15.3.3 利用touch事件自己封装

  1. 当我们手指触摸屏幕，记录当前触摸时间
  2. 当我们手指离开屏幕， 用离开的时间减去触摸的时间
  3. 如果时间小于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) {  // 如果手指触摸和离开时间小于150ms 算点击
                callback && callback(); // 执行回调函数
            }
            isMove = false;  //  取反 重置
            startTime = 0;
        });
}
//调用  
  tap(div, function(){   // 执行代码  });

15.3.4 fastclick 插件

使用插件fastclick 插件解决300ms 延迟。

<script type='application/javascript' src='/path/to/fastclick.js'></script>
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}
</script>

15.4 移动端常用开发插件

15.4.1 什么是插件

移动端要求的是快速开发，所以我们经常会借助于一些插件来帮我完成操作，那么什么是插件呢？

JS 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。

特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。

我们以前写的animate.js 也算一个最简单的插件

fastclick 插件解决 300ms 延迟。 使用延时

GitHub官网地址： https://github.com/ftlabs/fastclick

15.4.2 Swiper 插件的使用

中文官网地址： https://www.swiper.com.cn/

  1. 引入插件相关文件。
  2. 按照规定语法使用

15.4.3 视频插件zy.media.js

框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。

插件一般是为了解决某个问题而专门存在，其功能单一，并且比较小。
前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能开发PC端，也能开发移动端
前端常用的移动端插件有 swiper、superslide、iscroll等。

框架： 大而全，一整套解决方案
插件： 小而专一，某个功能的解决方案

15.4.4 其他移动端常见插件

lsuperslide： http://www.superslide2.com/
l iscroll： https://github.com/cubiq/iscroll

15.5 移动端常用开发框架

15.5.1 BootStrap

Bootstrap 是一个简洁、直观、强悍的前端开发框架，它让 web 开发更迅速、简单。
它能开发PC端，也能开发移动端
Bootstrap JS插件使用步骤：

1.引入相关js 文件
2.复制HTML 结构
3.修改对应样式
4.修改相应JS 参数

15.5.2案例讲解-阿里百秀轮播图

1.引入相关js 文件
2.复制HTML 结构
3.修改对应样式
4.修改相应JS 参数

15.6本地存储

15.6.1本地存储特性

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大，sessionStorage约5M、localStorage约20M
4、只能存储字符串，可以将对象JSON.stringify() 编码后存储

15.6.2 window.sessionStorage

1、生命周期为关闭浏览器窗口
2、在同一个窗口(页面)下数据可以共享
3、以键值对的形式存储使用

存储数据：

sessionStorage.setItem(key, value)

获取数据：

sessionStorage.getItem(key)

删除数据：

sessionStorage.removeItem(key)

清空数据：(所有都清除掉)

sessionStorage.clear()

15.6.3 window.localStorage

1、声明周期永久生效，除非手动删除 否则关闭页面也会存在

2、可以多窗口（页面）共享（同一浏览器可以共享）

  1. 以键值对的形式存储使用

存储数据：

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)

清空数据：(所有都清除掉)

localStorage.clear()

15.6.4 案例讲解-记住用户名

如果勾选记住用户名， 下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名

案例分析

  1. 把数据存起来，用到本地存储

  2. 关闭页面，也可以显示用户名，所以用到localStorage

  3. 打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框

  4. 当复选框发生改变的时候change事件

  5. 如果勾选，就存储，否则就移除

<input type="text" id= "username" />
<input type= "checkbox" name="" id="remember">  
<script>
var username = document.querySelector( '#username');
var remember = document.querySelector('#remember');
if (localStorage.getItem('username')){
    username.value a localStorage.getItem( ' username ' );
    remember .checked = true;
}
remember. addEventListener('change', function(){
        if (this.checked){
            localStorage.setItem( 'username ' , username.value)
        }else{
           localStorage.removeItem( 'username');
        }
}
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 200,961评论 5赞 473
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,444评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,009评论 0赞 333
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,082评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,101评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,271评论 1赞 278
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,738评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,395评论 0赞 255
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,539评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,434评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,481评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,160评论 3赞 317
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,749评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,816评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,038评论 1赞 256
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,548评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,140评论 2赞 341