JS移动端事件基础及常用事件库详解

随着移动端的普及，越来越多的网站需要对移动端进行支持。而移动设备和桌面设备不同，触摸屏幕是最主要的交互方式，因此在移动端开发中，事件处理是至关重要的。此文将讲解移动端事件基础概念及常用的事件库。

基础概念

Touch事件

一般来说，移动端只有一种事件——Touch事件。这个事件包含一系列的属性，其中最重要的是以下三个：

• event.touches：表示一个列表，列表中包含当前跟踪的所有手指。
• event.targetTouches：表示一个列表，列表中包含当前跟踪的手指，该手指在当前 DOM 元素上。
• event.changedTouches：表示一个列表，该列表中包含发生变化的手指。一般指的是发生了按下，移动和放开事件的手指。

移动端事件

以下是常见的移动端事件：

• touchstart：当手指触摸屏幕时触发，即使已经有一个手指放在了屏幕上也会触发。
• touchmove：当手指在屏幕上滑动时连续地触发。
• touchend：当手指离开屏幕时触发。
• touchcancel：当系统停止跟踪触摸时触发。例如，当用户接听电话时，屏幕上的触摸事件就会被取消。

常用事件库

有了基础概念，现在介绍几个比较好用的移动端事件库。

Hammer.js

Hammer.js 是一款非常流行的手势事件库，它支持单点触摸和多点触摸手势，并且能够兼容各种触摸设备。

以下是一个使用 Hammer.js 来实现一个 simple lightbox 的示例：

var mc = new Hammer.Manager(el);

mc.add(new Hammer.Swipe({ direction: Hammer.DIRECTION_HORIZONTAL }));
mc.add(new Hammer.Tap());

mc.on("swipeleft", function() {
  // 向左滑动
});

mc.on("swiperight", function() {
  // 向右滑动
});

mc.on("tap", function() {
  // 点击事件
});

touchSwipe

touchSwipe 是一个轻量级的 jQuery 插件，专门用于处理移动设备上的滑动事件。它能够通过绑定相应的事件处理程序，帮助我们快速地实现滑动相关的功能。

以下是一个使用 touchSwipe 来实现划屏功能的示例：

<div class="box">touch to swipe me</div>

<script src="jquery.min.js"></script>
<script src="jquery.touchSwipe.min.js"></script>
<script>
  $(".box").swipe({
    // 右滑事件
    swipeRight: function() {
      console.log("swipe right");
    },
    // 左滑事件
    swipeLeft: function() {
      console.log("swipe left");
    }
  });
</script>

结语

移动设备作为越来越重要的设备，移动端的开发也越来越受到重视。本文主要介绍了移动端事件的基础概念及几个常用的移动端事件库。希望能够帮助大家更好地开发移动端网站。