jQuery Mobile 触摸事件

jQuery Mobile 的触摸事件（Touch Events）是它在 2011–2015 年移动端最强悍、最好用的特性之一，直到今天（2025 年）在很多企业内网、老安卓机、工业平板项目里依然是首选。

下面给你最全、最实用的 jQuery Mobile 触摸事件清单 + 最佳实践写法（基于 1.4.5，最新版）：

事件名称	触发条件	移动端延迟	推荐用途	备注
tap	手指点下去 + 快速抬起（< 750ms 且移动 < 30px）	≈ 0ms	代替 click，最快最准的“点击”	强烈推荐所有按钮用 tap
taphold	手指按住 ≥ 750ms	–	长按删除、长按复制、显示上下文菜单	可通过 $.event.special.taphold.threshold 修改时长
swipe	水平或垂直滑动 ≥ 30px，且 ≤ 750ms 完成	–	通用滑动检测	通常配合 swipeleft / swiperight 使用
swipeleft	向左滑动 ≥ 30px	–	删除项、下一页、关闭侧边栏	最常用！
swiperight	向右滑动 ≥ 30px	–	返回上一页、打开侧边栏	最常用！
scrollstart	开始滚动	–	暂停视频、隐藏工具栏	–
scrollstop	停止滚动 ≈300ms 后	–	延迟加载图片、恢复工具栏	–

参数可以自定义（全局修改）

// 修改滑动最小距离（默认 30px）
$.event.special.swipe.horizontalDistanceThreshold = 50;  

// 修改滑动最大允许时间（默认 750ms）
$.event.special.swipe.durationThreshold = 1000;          

// 修改长按时间（默认 750ms）
$.event.special.taphold.threshold = 1000;

2025 年最推荐的写法（事件委托 + 页面生命周期）

// 写在任意位置都生效（推荐放在 main.js 最后）
$(document).on({
    // 1. 轻触（最常用的点击）
    tap: function(e) {
        e.preventDefault();  // 防止 300ms 延迟和重复触发
        console.log("tap 触发", this);
        // 你的代码
    },

    // 2. 长按
    taphold: function(e) {
        e.preventDefault();
        alert("长按了：" + $(this).text());
    },

    // 3. 左右滑动（最常用组合）
    swipeleft: function(e) {
        // 左滑：删除、下一页
        $(this).addClass("swipe-delete");
    },
    swiperight: function(e) {
        // 右滑：返回、打开菜单
        history.back();
    }

}, ".list-item");   // 事件委托到列表项，性能最好

经典实战案例（直接复制就能用）

1. 列表项左滑删除（最常见需求）

<li class="list-item" data-id="123">
    <div class="item-content">张三</div>
    <div class="delete-btn">删除</div>
</li>

.list-item { position: relative; transition: all 0.3s; overflow: hidden; }
.delete-btn { position: absolute; right: -80px; top: 0; width: 80px; height: 100%; background: red; color: #fff; text-align: center; line-height: 44px; }
.swipe-delete { transform: translateX(-80px); }

$(document).on("swipeleft", ".list-item", function() {
    $(this).addClass("swipe-delete");
});
$(document).on("tap", ".delete-btn", function() {
    $(this).parent().remove();
});

2. 整页左右滑动翻页

$(document).on("swipeleft", ".ui-page-active", function() {
    var next = $("#nextPage");   // 准备好下一个页面 ID
    if (next.length) $.mobile.changePage(next);
});
$(document).on("swiperight", ".ui-page-active", function() {
    history.back();
});

3. 图片长按保存（微信风格）

$(document).on("taphold", "img", function(e) {
    e.preventDefault();
    if (confirm("保存图片到相册？")) {
        // 调用 Cordova/PhoneGap 插件或微信 JS-SDK 保存
    }
});

重要提醒（2025 年还在用必须知道的坑）

1. 一定要阻止 tap 的默认行为，否则可能和 vclick 一起触发两次！

   tap: function(e) { e.preventDefault(); ... }

2. 不要混用原生 click 和 jQuery Mobile 的 tap（会有 300ms 延迟 + 双击放大问题）
3. 在列表里千万用事件委托，否则动态添加的项不生效

需要我给你打包一个 “jQuery Mobile 触摸事件完整 demo”（包含 10 个常见手势案例），直接下载就能跑，告诉我一声就发你！