移动端事件库Touch.js使用方法

最新推荐文章于 2026-04-03 13:43:54 发布

原创最新推荐文章于 2026-04-03 13:43:54 发布 · 1.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #开发语言

Touch.js是一个由百度云Clouda团队维护的手势识别与事件库，专为移动设备设计，提供如双击（doubletap）、单击（tap）、滑动（swipe）等手势支持。这个库在百度内部广泛应用，并且支持拖动、缩放等多种交互操作。开发者可以通过简单的API调用来监听和响应这些手势事件，例如通过`touch.on(DOM元素, 事件名, 处理函数)`来实现特定手势的处理。然而，需要注意的是，Touch.js目前已停止更新。

移动端事件库 Touch.js

Touch.js

Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护，也是在百度内部广泛使用的开发工具.(已停更)

Touch.js手势库专为移动设备设计,是Web移动端touch点击事件不错的解决方案

添加链接描述
通过git clone 链接下载Touch.js
在这里插入图片描述
支持移动端事件（部分）

事件名	触发条件
doubletap	双击屏幕
tap	单机屏幕
swipe	滑动
swipeleft	向左滑动
swiperight	向右滑动
swipedown	向下滑动
swipeup	向上滑动
hold	长按屏幕
dragstart	拖动开始
drag	拖动
pinchstart	缩放手势起点
pinchin	收缩
pinchout	放大

// <script src="./js/touch-0.2.14.min.js"></script> 引用touch.js 文件

<script>
    var div_ = document.getElementsByTagName('div')[0];
    var ul_ = document.getElementsByTagName('ul')[0]
    // touch.on(1,2,3)

    // 三个参数
    // 1、DOM元素
    // 2、移动端事件名
    // 3、处理函数

    // 例如
    touch.on(div_, 'tap', function () {
        div_.style.backgroundColor = 'red';
        ul_.style.backgroundColor = 'red';
    })
</script>