目录

1.触屏事件

1.1触屏事件的概述

 1.2触摸事件对象

1.3移动端拖动元素

2. 移动端常见特效

2.1 classList 属性 

2.2 click 延时解决方案

3.移动端常用开发插件

3.1 什么是插件？

3.2 插件的使用

3.3 Swiper 插件的使用

3.4 其他插件官网

3.5 插件使用的总结

3.6 练习-移动端视频插件 zy.media.js

4.移动端常用开发框架

4.1 框架概述

4.2 Bootstrap

---

1.触屏事件

1.1触屏事件的概述

 1.2触摸事件对象

键盘事件会产生键盘事件对象，鼠标事件会产生鼠标事件对象

1.3移动端拖动元素

2. 移动端常见特效

2.1 classList 属性 

 

2.2 click 延时解决方案

方案一：

方案二： 

 //封装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(){ // 执行代码 });

方案三：

 

3.移动端常用开发插件

3.1 什么是插件？

 

3.2 插件的使用

 

3.3 Swiper 插件的使用

3.4 其他插件官网

 

3.5 插件使用的总结

 

3.6 练习-移动端视频插件 zy.media.js

4.移动端常用开发框架

插件：解决某个小功能的

框架：提供一整套解决方案的

4.1 框架概述

 

4.2 Bootstrap