javascript 300ms延迟消除:使用fastclick.js与使用ontouchstart

sg2wtvxw  于 2022-12-25  发布在  Java
关注(0)|答案(6)|浏览(161)

我使用的是常规的jQuery,我有一个事件处理程序,如下所示:

$('#someID').on({

   click: SomeFunction

}, '.SomeClass');

这将在click事件上产生300ms的延迟,我希望消除这个延迟。像这样重写代码有什么区别:

$('#someID').on({

   'touchstart': SomeFunction

}, '.SomeClass');

并使用Fastclick.js这样的外部库吗

wgx48brx

wgx48brx1#

我在英国《金融时报》工作,领导着创建Fastclick.js的团队。
原则上,Fastclick所做的一切就是绑定到touchend事件,并在同一个元素上触发click事件。然而,有许多边缘情况、陷阱和陷阱,所有这些我们都已经发现、解决并烘焙到fastclick中。例如:

  • 如果你在触摸过程中移动手指,这是一个滑动或其他类型的手势,所以我们不应该作出React
  • 如果你一次用一个以上的手指触摸,我们不应该有React
  • 如果触摸文本字段,则控件需要获得焦点并接收单击事件
  • 一些控件需要本地点击才能操作(出于安全考虑),因此我们应该允许选择性地退出Fastclick
  • 一些浏览器已经支持当 windows 大小默认为device-width时的快速点击。我们不应该在这些用户代理中激活快速点击行为。

因为Fastclick是1%的基本前提和99%的边缘情况,所以有很多更小的替代方案,包括可能你自己编写的一个,但是很多人更喜欢使用一个经过良好测试的库所带来的保证。
请注意,我们使用touchend而不是touchstart,因为A)只有当您将手指从鼠标按钮或触控板上抬起时才会触发点击,因此触摸应该反映该行为,以及B)在您结束触摸之前,我们还不知道您是否计划在手指与屏幕接触时移动手指,这将是一种手势、滑动或滚动,而不是点击。

fsi0uk1n

fsi0uk1n2#

  • touchstart* 在手指触摸元素时发生,而 click 只有在同一元素上松开手指(touchend)**后才会触发。如果触摸,将手指移出元素,然后松开,则不会发生 click 事件。但是,在这种情况下,touchstart会发生。

因为你标记 * cordova *,我假设它是一个 cordova 混合移动的应用程序。
1.在Android 2.3.x之后的版本中,如果禁用缩放,则会删除300毫秒:

<meta name="viewport" content="width=device-width, user-scalable=no" />

2.在Android 4.4.3之后的版本(网页视图为Chrome 33)中,如果您指定页面为移动优化页面,则300毫秒将被删除:

<meta name="viewport" content="width=device-width" />

1.在IE10+上,使用CSS删除该延迟:

  • 毫秒-触摸-操作:操纵;/* IE10 /
    触摸动作:操纵;/
    IE11+ */
    1.在iOS上,无法使用 viewport 禁用300毫秒延迟
    因此,为了确保300 ms被删除,我通常使用一个tap库进行tap。例如:tappy(仅点击),zepto touch(点击,滑动--如果你的网站已经使用zepto就很好了),hammer.js(各种手势),这取决于你的需要。
    FastClick.js应该可以,虽然我还没有尝试过。
6yt4nkrj

6yt4nkrj3#

安德鲁给出了正确答案。
总的来说,

  • *"touchstart"**会在我们执行"单击"、"滑动"、"滚动"等操作时触发,不过,正如你所知,我们要捕捉的是"单击"。
    • FastClick.js所做的是为"单击"定义一个规则**。例如,我们可以将下面的条件设置为"单击":

"touchstart"和"touchend"之间的时间为200ms,在"touchmove"中,我们发现没有移动任何距离。
同样,我们可以将下面的条件设置为"滚动":
在"touchstart"和"touchend"期间,在"touchmove"中,我们发现y轴上的距离已移动,但x轴未移动。

d6kp6zgx

d6kp6zgx4#

要消除300ms延迟,有两个选项:

    • 备选案文1:**

默认情况下,webview上的click事件会有大约300ms的延迟,这会导致单击按钮时响应/性能非常慢。您可以尝试在jQuery Mobile中使用**'tap'**事件覆盖click事件以消除延迟:(来源:IBM

$('btnId').on('tap', function(e) {
     e.stopImmediatePropagation();
     e.preventDefault();
     ...
});
    • 选项2:**有趣的一个

默认情况下,JQuery Mobile CSS本身引入了一个很长的延迟-我的意思是有些地方300ms或350ms或225ms。这些延迟可以优化。我也修改了默认CSS,将页面转换的长延迟从350ms减少到100ms,这真的很棒。
在Jquery Mobile CSS中搜索:* * 动画持续时间**

    • JQuery移动版1.2.0**

在某些地方,延迟设置为:-webkit-animation-duration:350ms;-moz-animation-duration:350ms,其他位置延迟为:-webkit-animation-duration:225ms;-moz-animation-duration:225ms

    • github上的最新版本:**
.in {
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 350ms;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 350ms;
    animation-timing-function: ease-out;
    animation-duration: 350ms;
}
.out {
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 225ms;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 225ms;
    animation-timing-function: ease-in;
    animation-duration: 225ms;
}

检查this github code
现在由你决定你想要优化的延迟,如点击,页面转换,翻转,滑动等,相应地只需修改默认的延迟时间与自己想要的延迟时间。
这样就需要额外的库

a9wyjsp7

a9wyjsp75#

如果你访问一个没有移动的优化的网站,它会开始缩小,这样你就可以看到页面的整个宽度。要阅读内容,你可以捏住缩放,或者双击一些内容将其缩放到全宽度。双击是性能杀手,因为每一次点击我们都要等待,看看它是否会变成双击,而等待时间是300毫秒。下面是它的结果:

  • 接触起动
  • 触端
  • 等待300ms,以防再次点击
  • 咔嗒声

这种暂停适用于JavaScript中的单击事件,但也适用于其他基于单击的交互,如链接和表单控件。
http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
Fastclick.js解决了用户不想点击元素而只是决定滚动的相关问题。

wpcxdonn

wpcxdonn6#

您现在可能不使用FastClick.js:
注:截至2015年底,大多数移动的浏览器--特别是Chrome和Safari --不再有300毫秒的触摸延迟,因此fastclick在较新的浏览器上没有任何好处,而且有可能给你的应用程序带来bug。请仔细考虑你是否真的需要使用它。
(摘自:https://github.com/ftlabs/fastclick文档)

相关问题