仅与JQuery一起处理单触摸事件



我正在处理<canvas>区域(使用jQuery)上的触摸事件。我只想处理单个触摸事件,留下多个触摸事件(例如,您可以捏和Zoom)。

问题在于,无论触摸有多么同时,我都会得到一个分点的touchstart,其次是touchmove,最后是一个点,最后一个touchstart,带有2分。

如果我用preventDefault()取消第一个touchdown事件,则没有缩放,即使我在touchmove之后不取消或第二个touchdown

如果我在第一个事件上不 preventDefault(),则touchmove事件除了处理触摸运动外,还将上下滚动页面。

(在Android 8.1.0上进行测试 - 三星Galaxy Tab a)

我环顾了各种帖子和网络搜索,例如:仅在初次触摸时进行jQuery预防默认 还是如何防止触摸事件的默认处理?或JavaScript支持触摸而不阻止浏览器捏支持

...虽然对这种情况并不具体,但我感到自己不幸。但是,在第一个事件中无法检测到多个触摸,似乎是触摸事件处理的缺点。

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

谢谢建议的人!我确实希望有人能找到答案有用,但不幸的是,它不符合我的目的,我认为我应该解释为什么(也许是多余的,但可能会为某人提供更多洞察力)。

给出一些背景,这是针对可重复使用的模块,该模块为元素提供API,包括绘制"精灵"和处理鼠标/触摸事件,例如'down'',''',up'','drag等。我需要在可重复性和清晰的背景下仔细考虑利弊。

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

  1. 次要的问题是,任何基于延迟的"多触摸"实现都是主观的。多次触摸不是超时的 - 理论上可以用一根手指触摸,悠闲地饮咖啡(大概是用另一只手),然后用另一根手指触摸,然后仍然可以(例如)变焦。如果这是唯一的问题,那么我可能会在预先确定的时间内生活,但这将基于我对用户习惯的看法。(例如,我可以预见,有人在地理地图(例如地理地图)上触摸"精灵"的人,意识到他们想关注一些细节,然后尝试放大。)

  2. 如果我确实延迟了下降,则说出300毫秒延迟,它会变成一个兔子孔。大约三分之一一秒钟可能会发生很多事情;他们可能会开始"精灵"阻力。然后有两个选择:

如果我等待确保它是单一的触摸,我会想念(或缓存)至少一个"移动"事件,然后所有拖动将在开始时稍有犹豫。一秒钟的三分之一在可感知的范围内,因此这是不可接受的。

或者,我可以检测到轻微的运动,并假设这是运动手势的开始,例如拖动。然后,我必须同时提出API的"下降"one_answers"移动"事件,这是一个令人反感的twiddle,但又可以容忍。更模棱两可的是确定其实际运动的阈值。非常稳定的触摸很容易在触摸屏上获得4-6个像素的运动,而且我看到超过12个像素的摇摆触感。差距可能足够大,可以显示出一个不可思议的抖动。

您可以想象,这已经是一个非常非常密集的模块,尤其是在移动设备上的问题。考虑到增加的代码复杂性和大小的增加(以及鼠标与触摸事件代码路径的进一步差异),可能需要引入几种可调整的设置,这些设置可能对用户不透明,并且任何解决方案都是妥协的事实(点1),我认为最不糟糕的选择是遵守这一限制。这里的最高优先事项是平滑的图形处理和精益代码(大小和处理器的强度)。

因此,在这一点上,我愿意放弃对元素的多次触摸手势。放大元素外部工作正常,不是出乎意料的行为 - 见证Google Maps。

对于更简单的应用程序,通常应该接受延迟检测"达阵"以检查进一步的触摸。

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

例如:

$(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.gith.github.com/attenzione/7098476

使用此:

$(SELECTOR).on('doubletap',function(event){
alert('doubletap');
});

最新更新