jQuery mobile-每个实时触摸事件是否都应该有一个相应的单击事件？

Question

我已经将jQuery的live点击事件替换为jQuery移动触摸事件以增加响应速度。

我有一种感觉，出于兼容性的原因，这可能是一个坏主意。

是否有必要同时拥有这两个事件，并且是否有任何方法将它们都写在同一个函数中？

例如：('click'，'tap')

- TaylorMac

Answer 1

Billy提供的答案非常完整，在我使用了几次后实际上效果很好。此外，你可能还想看一下JQuery Mobile中的vmouse插件，它是对鼠标事件的抽象尝试：

 // This plugin is an experiment for abstracting away the touch and mouse
 // events so that developers don't have to worry about which method of input
 // the device their document is loaded on supports.

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

我一直在自己的项目中使用它，现在看来响应还不错。使用时，可以像这样：

$('selector').bind('vclick', function () { ...

或者

$('selector').bind('vmousedown', function () { ...

- J.T.Sage

---

比利的回答很好，但这个解决方案更简单。我已经集成了它。谢谢。 - TaylorMac

J.T.的回答是正确的方法。如果你实现了其他东西，请重新考虑一下。 - naugtur

当前版本的JQM是否仍需要vmouse库？文档中包含虚拟鼠标事件下的“vclick”事件。这是同一件事吗？ - joey_g216

好的，我在我的网站中包含了这个插件，但它显示变量“define”未定义... 嗯，这是GitHub的典型问题。有人知道如何让它工作吗...？ - 3Dom

好的，哇，我已经查看了你需要所有这些工作所需的内容。我以前从未见过如此臃肿的垃圾解决方案用于任何JS。你需要加载两个臃肿的JS文件，只是为了在智能手机上触发一些事件？算了吧... @JT，这是一个可怕的解决方案。 - 3Dom

Answer 2

你可以像这样一次绑定多个事件：

$('selector').bind('click tap',function(){ ... })

在某些浏览器/移动设备上可能还好，但是在某些同时触发tap和click事件的设备上可能会导致事件被触发两次。

您可以通过进行某种设备/功能检测并仅添加适当的处理程序来解决此问题，例如...

$('selector').bind( myCustomDetectionFunction() ? 'click' : 'tap' ,function(){ ... })

此外，我认为touchstart和mousedown事件更好选择。这是因为在触摸后，点击事件要经过一段时间的延迟才会触发，因为系统允许第二个触摸使其成为双击或滑动手势等等。而touchstart事件会立即触发，mousedown事件也是如此，因此响应速度应该更快。

- Billy Moon

---

在移动设备上，mousedown事件是否像“tap”事件一样响应迅速？我更喜欢使用一个事件并避免编写用于设备检测的函数，毕竟我的移动布局仅依赖于分辨率。 - TaylorMac

我会编写一个函数来检测设备是否支持触摸，然后使用 touchstart 和 mousedown 事件。不必详细了解是哪种设备。这可能是确保跨平台获得最快响应的最简单方法。检测设备是否支持触摸只需检查 Touch 是否已定义即可。因此可以这样写：(typeof Touch !== "undefined") ? 'touchstart' : 'mousedown' - Billy Moon

@dpk 关于Android 2.3.4浏览器的评论是完全正确的。它根本没有很好地降级。需要更好的触摸检测！ - Billy Moon

非常好，完美地运作。不知道为什么那些臃肿的软件在这个问题上排名比你高。 - 3Dom

虽然这是一个旧的线程，但当需要点击或轻触时，我仍然对mousedown/touchstart持谨慎态度，因为涉及到拖放交互。如果在用户实际上正在拖选某些文本或其他内容（或滑动）时，你在mousedown上触发了事件，应用程序将开始一个他们不想要的操作。你必须考虑等待第二次点击和意外触发之间的权衡。mouseup/touchend同样如此。 - eon

Answer 3

我们开发了一个小脚本来解决这个问题。只需在全局级别包含它，您的点击事件将立即触发，而无需担心延迟事件的任何问题。 https://github.com/cargomedia/jquery.touchToClick

- Marcel Colomb

Answer 4

看起来jQuery mobile已经有一个事件可以做到这一点：

$(function(){
    $('selector').bind('vclick', function(e){
        alert('test');    
        return false;
    });
});

- h3.

Answer 5

您可以使用jQuery的vmouse插件。这将解决移动设备上点击事件的300毫秒延迟问题，以及同时触发点击和触摸事件的情况。

要获取仅vmouse插件，请使用jQuery Mobile Download Builder。在jQuery之后但在依赖于此插件的任何脚本之前包含它。

相关事件是vclick，基本用法如下：

$(".selector").on( "vclick", function( event ) {
    // To execute
});

- user2449231

---

+1 给 vMouse 版定制构建！虽然不是 jQuery mobile 的粉丝，但这个经过 4kb 压缩后的构建非常轻便，并且完全符合我的需求。 - abenrob

请注意，vclick 也会捕获右键单击事件，因此您可能希望检测以在开发过程中保持自己的理智：.on("vclick",function (e) {alert(e.which)}); - user2449231

太高兴发现这个了！回到我所有的PGB应用程序，确保我包含这个...我曾经认为iPhone只是慢得要死。哈哈 - Michael Fever