Web前端开发学习笔记11--移动端插件以及框架

最新推荐文章于 2024-08-14 17:14:45 发布

原创最新推荐文章于 2024-08-14 17:14:45 发布 · 543 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

前端开发学习专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了移动端Web开发中的触屏事件，包括touchstart、touchmove和touchend，以及如何解决click事件的300ms延迟问题。此外，还探讨了classList类在处理元素类名中的应用。接着，讨论了JavaScript插件如Swiper的使用，并列举了其他常见插件。最后，提到了前端开发框架的作用，并以Bootstrap为例展示了如何引入和使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、触屏事件

1.1 触屏事件

触屏对象：touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者控板的操作

触屏事件

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

触屏事件对象

TouchEvent 是一类描述手指在触摸平面的状态变化的事件，这类事件用于一个或多个触点，使开发者可以检测触点的移动、增加和减少等。

touchstart、touchmove、touchend 三个事件都会有各自有事件对象

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

1.2 classList 类

classLIst ：返回元素类名，classList 属性用于在元素中添加、移除以及切换 CSS类

添加类：在后面追加类名不会覆盖以前的类名

element.classLis.add('类名');

移除类：

element.classList.remove('类名');

切换类

element.classList.toggle('类名');

1.3 移动端 click 事件 300ms 延迟问题

移动端 click 事件会有 300ms 的延时，是因为移动端屏幕双击会缩放页面

解决方案

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

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

2、利用 touch 事件自己封装这个事件解决

解决原理：（1）当我们手指触摸屏幕，记录当前触摸时间；（2）当我们手指离开屏幕，用离开的时间减去触摸的时间；（3）如果时间小于 150ms ，并且没有滑动过屏幕，那么我们就定义为点击

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