使用jQuery仅处理单点触摸事件

问题描述 投票：0回答：1

我在<canvas>区域处理触摸事件（使用jQuery）。我只想处理单个触摸事件，使多个触摸事件处于未取消状态（例如，您可以进行捏合和缩放）。

问题在于，无论触摸的同时性如何，我得到一个点的touchstart，接着是一个点的touchmove，最后是一个点2的touchstart。

如果我用touchdown取消第一个preventDefault()事件，即使我没有在touchmove和第二个touchdown之后取消，也没有缩放。

如果我在第一个事件上没有preventDefault()，那么touchmove事件除了处理触摸动作之外还会上下滚动页面。

（在Android 8.1.0上测试 - 三星Galaxy Tab A）

我查看了各种帖子和网络搜索，例如：jquery preventdefault on first touch only或How to prevent default handling of touch events?或Javascript support for touch without blocking browsers pinch support

......虽然不是特定于这种情况，但我觉得我运气不好。然而，这似乎是触摸事件处理的缺点，因为它使得在第一个事件上无法检测到多个触摸。

------------编辑-----------

感谢大家的建议！我希望有人发现答案有用，但遗憾的是它不适合我的目的，我认为我应该解释为什么（多余的，也许，但可能会提供更多的见解）。

为了给出一些背景知识，这是一个可重用的模块，它为元素提供API，包括绘制'sprites'和处理鼠标/触摸事件，如'down'，'up'，'drag'等。因此，我需要在可重用性和清晰度的背景下仔细考虑利弊。

这里提到的解决方案以及我发现或确实可以想到的所有其他解决方案都需要延迟。这有两个问题：

  1. 小问题是任何基于延迟的“多点触摸”实现都是主观的。多次触摸不会超时 - 理论上你可以用一根手指触摸，悠闲地喝一杯咖啡（大概用另一只手），然后用另一只手触摸，然后仍然能够（例如）放大。如果这是唯一的问题，我可能会有一个预先确定的超时，但这将取决于我对用户习惯的看法。 （我可以预见，例如，有人在像地理地图这样的密集背景上触摸'精灵'，意识到他们想要关注一些细节，然后尝试放大。）
  2. 如果我确实延迟了，比如选择300毫秒的延迟，那就变成了一个兔子洞。大约三分之一秒钟就会发生很多事情;可能，他们可能会开始“精灵”拖累。然后有两种选择：

如果我等待确保它只是一次触摸，我会错过（或缓存）至少一个“移动”事件，然后所有拖动都会在开始时显示出轻微的犹豫。三分之一秒完全在可感知范围内，所以这是不可接受的。

或者，我可以检测到轻微的移动并假设它是拖动等动作手势的开始。然后，我必须同时提高API的“向下”和“移动”事件，这是一个令人反感的旋转，但又是可以容忍的。更模糊的是确定它的实际运动的阈值。非常稳定的触摸可以轻松地在触摸屏上获得4-6个像素的移动，并且我已经看到超过12个像素的摇晃触摸。差距可能很大，足以显示出不合时宜的抖动。

可以想象，这已经是一个非常耗费处理器的模块，特别是在移动设备上存在问题。考虑到代码复杂性和大小的增加（以及鼠标与触摸事件代码路径的进一步分歧），可能需要引入几个可能对用户来说相当不透明的可调整设置，以及任何解决方案都是妥协的事实（第1点） ，我认为最不好的选择是忍受这种限制。这里的最高优先级是流畅的图形处理和精益代码（尺寸和处理器密集度）。

所以在这一点上我愿意放弃元素上的多个触摸手势。在元素外缩放工作正常，并不是出乎意料的行为 - 见证谷歌地图。

对于更简单的应用，通常可以接受延迟检测“触地”以检查进一步的触摸。

javascript jquery touch-event
1个回答
0
投票

在第一个点击功能中间为第二个点按添加计时器。

例如：

$(myzone).touchstart(function(e){
   e.preventDefault();
   $(myzone).bind('touchstart',myeventTouch)
   action = setTimeout(function(e){
       $(myzone).unbind('touchstart',myeventTouch) 
       clearTimeout(action); 
   }, 500);
})

function myeventTouch(){
 //When double tap do..
}

如果您不想这样做，您还可以在页面中添加一个jQuery插件，例如我搜索了一个并找到了jquery.doubletap.js https://gist.github.com/attenzione/7098476

用这个：

$(SELECTOR).on('doubletap',function(event){
alert('doubletap');
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.