我使用的是常规的jQuery,我有一个事件处理程序,如下所示:
$('#someID').on({
click: SomeFunction
}, '.SomeClass');
这将在click事件上产生300ms的延迟,我希望消除这个延迟。像这样重写代码有什么区别:
$('#someID').on({
'touchstart': SomeFunction
}, '.SomeClass');
并使用Fastclick.js这样的外部库吗
我使用的是常规的jQuery,我有一个事件处理程序,如下所示:
$('#someID').on({
click: SomeFunction
}, '.SomeClass');
这将在click事件上产生300ms的延迟,我希望消除这个延迟。像这样重写代码有什么区别:
$('#someID').on({
'touchstart': SomeFunction
}, '.SomeClass');
并使用Fastclick.js这样的外部库吗
6条答案
按热度按时间wgx48brx1#
我在英国《金融时报》工作,领导着创建Fastclick.js的团队。
原则上,Fastclick所做的一切就是绑定到
touchend
事件,并在同一个元素上触发click
事件。然而,有许多边缘情况、陷阱和陷阱,所有这些我们都已经发现、解决并烘焙到fastclick中。例如:device-width
时的快速点击。我们不应该在这些用户代理中激活快速点击行为。因为Fastclick是1%的基本前提和99%的边缘情况,所以有很多更小的替代方案,包括可能你自己编写的一个,但是很多人更喜欢使用一个经过良好测试的库所带来的保证。
请注意,我们使用
touchend
而不是touchstart
,因为A)只有当您将手指从鼠标按钮或触控板上抬起时才会触发点击,因此触摸应该反映该行为,以及B)在您结束触摸之前,我们还不知道您是否计划在手指与屏幕接触时移动手指,这将是一种手势、滑动或滚动,而不是点击。fsi0uk1n2#
因为你标记 * cordova *,我假设它是一个 cordova 混合移动的应用程序。
1.在Android 2.3.x之后的版本中,如果禁用缩放,则会删除300毫秒:
2.在Android 4.4.3之后的版本(网页视图为Chrome 33)中,如果您指定页面为移动优化页面,则300毫秒将被删除:
1.在IE10+上,使用CSS删除该延迟:
触摸动作:操纵;/ IE11+ */
1.在iOS上,无法使用 viewport 禁用300毫秒延迟
因此,为了确保300 ms被删除,我通常使用一个tap库进行tap。例如:tappy(仅点击),zepto touch(点击,滑动--如果你的网站已经使用zepto就很好了),hammer.js(各种手势),这取决于你的需要。
FastClick.js应该可以,虽然我还没有尝试过。
6yt4nkrj3#
安德鲁给出了正确答案。
总的来说,
"touchstart"和"touchend"之间的时间为200ms,在"touchmove"中,我们发现没有移动任何距离。
同样,我们可以将下面的条件设置为"滚动":
在"touchstart"和"touchend"期间,在"touchmove"中,我们发现y轴上的距离已移动,但x轴未移动。
d6kp6zgx4#
要消除300ms延迟,有两个选项:
默认情况下,webview上的click事件会有大约300ms的延迟,这会导致单击按钮时响应/性能非常慢。您可以尝试在jQuery Mobile中使用**'tap'**事件覆盖click事件以消除延迟:(来源:IBM)
默认情况下,JQuery Mobile CSS本身引入了一个很长的延迟-我的意思是有些地方300ms或350ms或225ms。这些延迟可以优化。我也修改了默认CSS,将页面转换的长延迟从350ms减少到100ms,这真的很棒。
在Jquery Mobile CSS中搜索:* * 动画持续时间**
在某些地方,延迟设置为:
-webkit-animation-duration:350ms;-moz-animation-duration:350ms
,其他位置延迟为:-webkit-animation-duration:225ms;-moz-animation-duration:225ms
检查this github code:
现在由你决定你想要优化的延迟,如点击,页面转换,翻转,滑动等,相应地只需修改默认的延迟时间与自己想要的延迟时间。
这样就不需要额外的库
a9wyjsp75#
如果你访问一个没有移动的优化的网站,它会开始缩小,这样你就可以看到页面的整个宽度。要阅读内容,你可以捏住缩放,或者双击一些内容将其缩放到全宽度。双击是性能杀手,因为每一次点击我们都要等待,看看它是否会变成双击,而等待时间是300毫秒。下面是它的结果:
这种暂停适用于JavaScript中的单击事件,但也适用于其他基于单击的交互,如链接和表单控件。
http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
Fastclick.js解决了用户不想点击元素而只是决定滚动的相关问题。
wpcxdonn6#
您现在可能不使用FastClick.js:
注:截至2015年底,大多数移动的浏览器--特别是Chrome和Safari --不再有300毫秒的触摸延迟,因此fastclick在较新的浏览器上没有任何好处,而且有可能给你的应用程序带来bug。请仔细考虑你是否真的需要使用它。
(摘自:https://github.com/ftlabs/fastclick文档)