扩展 jQuery 的 .on() 以处理移动触摸事件答案

【问题标题】：Extend jQuery's .on() to work with mobile touch events扩展 jQuery 的 .on() 以处理移动触摸事件
【发布时间】：2013-07-17 12:08:01
【问题描述】：

我正在尝试使用 jQuery mobile 事件而不使用 jQuery mobile 的其余部分。

https://github.com/jvduf/jquery-mobile-events/blob/master/jquery.mobile.events.js

那个 sn-p 启用它们，并且工作正常，但不适用于 .on() 事件处理程序。例如：

$('a').on('tap',function(){
    console.log('Hi there!');
});

但它确实可以与 .live() 一起使用，但现在已经贬值了。

所以我的问题；有没有办法扩展 .on() 功能以包括点击事件和其他？完整列表如下：

触摸开始
触摸移动
触摸结束
方向改变
点击
轻拍
滑动
向左滑动
向右滑动
滚动开始
滚动停止

谢谢:)

【问题讨论】：

on() 的选择器必须是父级...阅读 on() 的帮助非常简单...
很酷的提取，但它的最新程度如何？认为 11 个月大的时候已经很老了，有人维护这个文件吗？

标签： javascript jquery mobile touch

【解决方案1】：

但它确实可以与 .live() 一起使用，但现在已贬值。

所以我认为您想使用事件委托来将这些事件保留在被替换的元素上。这意味着：

$('a').on('tap',function () {
    console.log('Hi there!');
});

需要更改为：

$(document).on('tap', 'a', function () {
    console.log('Hi there!');
});

为了让它表现得和$("a").live("tap", ...一样

【讨论】：

我知道这将是一些基本的东西，也许盯着我的屏幕太久了！非常感谢:)
为什么不能像在第一个 sn-p 中那样在元素上使用“on”函数？我只想在某些元素上附加处理程序，而不是在整个文档上。

【解决方案2】：

也许将 JQuery 事件代码扩展为移动和桌面会更好。

一种方法是使用 JQuery vmouse（虚拟鼠标）插件。

来自 vmouse 插件 cmets：

// 这个插件是一个抽象触摸和鼠标的实验
// 事件，让开发者不必担心输入哪个方法
// 他们的文档加载到的设备支持。
//
// 这里的想法是允许开发者为
注册监听器 // 基本鼠标事件，例如 mousedown、mousemove、mouseup 和 click，
// 插件会负责注册正确的监听器
// 在幕后以尽可能快的时间调用监听器
// 对于那个设备，同时仍然保持事件触发的顺序在
// 传统的鼠标环境，是否应该注册多个处理程序
// 在同一元素上用于不同的事件。
//
// 当前版本向 jQuery 绑定方法公开了以下虚拟事件：
// "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel"

如需更好的解释，请参阅https://coderwall.com/p/bdxjzg

vmouse 插件：https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.vmouse.js

另请参阅此链接了解（触摸）事件的当前状态：http://blogs.adobe.com/adobeandjquery/2011/03/07/the-current-state-of-touch-events/

【讨论】：