Android浏览器可以快速连续两次点击事件

Question

我正在尝试使用JavaScript和jQuery来捕获触摸事件.但是我在Android 2.3.2上的Web浏览器中看到了一些非常奇怪的行为:每当我点击屏幕,然后快速点击屏幕上的其他位置时,浏览器:

• 暂时显示橙色边框并突出显示整个屏幕,和
• 发给我错误的事件.

橙色边框似乎只是同一个潜在问题的一个相关症状,所以我并不太担心它 - 它实际上很方便能够告诉浏览器何时搞砸了.我真正想知道的是,我如何能够持续获得两次快速点击的正确触摸事件？我相信,当问题得到解决时,橙色边框也会消失.

以下是我到目前为止所制定的所有痛苦细节.

这是一个显示问题的页面,并显示有关收到的每个事件的详细信息和时间的大量诊断信息.如果你点击蓝色矩形,你肯定会得到橙色闪光/坏事件,然后快速点击黑色矩形.

我的jQuery代码非常标准.该log功能的实施并不重要; 问题是浏览器在应该的时候没有调用它.

el = $('#battle');
el.on('touchstart', function(event) {
  log(event);
  return event.preventDefault();
});
el.on('touchend', function(event) {
  return log(event);
});
el.on('touchcancel', function(event) {
  return log(event);
});
el.mousedown(function(event) {
  log(event);
  return event.preventDefault();
});
return el.mouseup(function(event) {
  return log(event);
});

关于我最初描述的现象的更多细节:

橙色边框和突出显示:这是相同的橙色边框,并突出显示浏览器在单击时绘制超链接.但是页面上没有超链接,浏览器在整个屏幕周围绘制橙色边框 - 或者更具体地说,是围绕外部<div id="battle">我通过jQuery挂钩事件.

错误事件:在我的touchstart事件处理程序,我打电话event.preventDefault(),告诉浏览器不滚动,而不是合成鼠标事件,等等.因此,我希望只得到touchstart和touchend事件.我做了,第一次点击.但不是touchstart/ touchend对于第二次敲击,我得到的所有数量的触摸事件的组合,合成的鼠标事件,以及偶尔touchcancel的第二次敲击,或第一次轻触甚至重复的事件.详情如下.

此行为也仅在非常特殊的情况下发生:

• 第一个水龙头必须短(小于~200ms).
• 此后第二次敲击必须快速到达(第一次敲击后不到约450ms touchstart).
• 第二个水龙头必须距离第一个水龙头至少150个像素(沿着第一个水龙头坐标的对角线测量touchstart).
• 如果我删除我的代码,钩子mousedown和mouseup,橙色矩形不再出现.但是,触摸事件有时仍然是乱码.

就我所说的乱码事件而言,这就是我所看到的.当我写"1:"时,这意味着事件是针对第一个tap的坐标; "2:"表示第二个水龙头的坐标.我看到了以下事件模式(百分比表示在100次试验后每次出现的次数):

• (50%)1:touchstart 1:touchend 1:mousedown 1:mouseup(短暂延迟)2:mousedown 2:mouseup
• (35%)1:touchstart 1:touchend 2:touchstart 1:mousedown 1:mouseup 2:touchend
• (10%)1:touchstart 1:touchend 2:touchstart 1:mousedown 1:mouseup 2:touchcancel(短暂延迟)2:mousedown 2:mouseup
• (3%)1:touchstart 1:touchend 2:touchstart 2:touchend(短暂延迟)1:mousedown 1:mouseup
• (2%)1:touchstart 1:touchend 1:mousedown 1:mouseup (第二次点击没有任何东西)

事件的某些组合似乎更频繁地出现取决于我点击的速度,但我还没有完全确定模式.(两个快速,清晰的水龙头似乎更有可能在上面的第二个项目下进入,而更快速的方法,更少强调脆度似乎更可能是第一项.但我还没有确定具体的时间数字导致对于每个.)同样,上面指出的"短延迟"可以是~150ms到~400ms之间的任何地方; 我也没有对整个模式进行逆向设计.

如果我不勾mousedown和mouseup,分布大致是这样的:

• (40%)1:touchstart 1:touchend 2:touchstart 2:touchcancel
• (35%)1:touchstart 1:touchend 2:touchstart 2:touchend (实际所需行为)
• (25%)1:touchstart 1:touchend (第二次点击没有任何内容)

因此,如果我不挂钩鼠标事件,它会工作三分之一的时间; 如果我愿意假装touchcancel意味着同样的事情touchend,我可以达到75%的时间.但那仍然非常糟糕.

替代品我已经尝试过:

• 我已经尝试使用jQuery Mobile的的vmousedown和vmouseup事件,但它们并不总是引发了第二次敲击,我怀疑这是因为相同的底层事件古怪的.
• 我可以完全忘记触摸事件并且仅使用合成的鼠标事件,但物理点击和合成鼠标事件的传递之间通常有大约半秒的延迟,而触摸事件是立即的,所以我可以更敏感.我也想防止滚动-这是一个全屏游戏,我宁愿没有用户不小心滚动地址栏回到视图中,并阻止比赛的一部分-而这样做preventDefault的touchstart通常实现了(虽然偶尔第二个水龙头实际上能够滚动屏幕,尽管我preventDefault...另一个原因,我想解决整个事件的混乱).
• 我尝试过第三方Web浏览器(Dolphin),但事件也有同样的问题.所以我猜测底层WebView将事件传递给脚本的方式可能存在问题.

任何人都可以建议一种方法来改变我的HTML,我的事件处理程序,或其他任何东西,以便可靠地连续两次快速点击触摸事件？

Answer 1

尝试在 Android 浏览器中开发多点触控 HTML5 游戏（并在其他 Android 兼容浏览器中进行尝试）后，我认为 Android 2.x 的浏览器根本无法正确支持触摸输入。首先，它不支持多点触控，这使得某些类型的游戏无法玩。（显然，手机支持多点触控，因为你可以捏缩放等，但浏览器不支持。）然后存在很多延迟、触摸“粘连”等问题。我依稀记得读过一些关于手机触摸输入驱动程序的内容，这些驱动程序并不真正适用于真正的多点触控（即它可以检测单点触摸或捏缩放，仅此而已），但我没有任何参考资料来支持这一点......

显然 Android 4（冰淇淋三明治）修复了这个问题。因此，您可能只需要等待 Android 4（无论如何，它应该很快就会发布），然后重试。除此之外，谷歌还宣布他们计划在未来用移动版 Chrome 取代 Android 浏览器，所以希望至少到那时我们的浏览器触摸输入问题将会结束。