Question

简单的问题。我有一个DIV，点击时会改变它的背景颜色。这是HTML：

<html lang="en">

<head>
<meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, initial-scale=1">
<script type="text/javascript" src="./js/code.js"></script>
<link rel="stylesheet" href="./css/styles.css">
<title>xxx</title>
</head>

<body onload="fInitializeFramework()">
<div onclick="fx()" class="fx">touch me!</div>
</body>

</html>

CSS：

html {

  height: 100%;

  -webkit-touch-callout: none;                /* Prevent callout to copy image, etc. when tap to hold */

  -webkit-text-size-adjust: none;             /* Prevent webkit from resizing text to fit */

  -webkit-tap-highlight-color: rgba(0,0,0,0); /* Prevent tap highlight color/shadow */

  -webkit-user-select: none;                  /* No element selection */

  cursor: default;                            /* Default cursor */

  touch-action: manipulation;                 /* Disable double tap to zoom */

}

.fx:active {
  background: yellow;
}

和javascript：

function fInitializeFramework()
{
  document.addEventListener("deviceready",fRun);
  return;
}

function fRun()
{
  return;
}

function fx()
{
  return;
}

在桌面上的Chrome上，一切正常，点击事件会快速触发。但是一旦变成了带有Cordova的apk，在平板电脑或手机上，DIV上的触摸与其背景颜色的变化之间存在延迟。

看起来臭名昭着的300毫秒延迟。然而，我遵循了推荐的一切：

viewport meta，width = device-width，minimum-scale = 1.0，maximum-scale = 1.0
触摸动作：操纵，等

我尝试使用fasclick.js，没有结果。这是正常的，因为它在文档中所说的chrome 32+之后是无用的。

我怀疑：有效，所以我尝试使用javascript更改处理onclick（）事件的后台，而不是在HTML中使用onclick。同样的结果，延迟了平板电脑。

Android是6.0。 Cordova 7.0.1。

有什么想法吗？

Answer 1

点击触摸屏的延迟与设计相同 - 它可以区分拖动/滑动（触摸时触摸和移动）和点击（触摸并按住相同位置）。

我在游戏中遇到了这个问题。在我的情况下，补救措施是将我的代码绑定到 touchstart - 这会更快地注册。

我的应用程序的界面设计是这样的，用户只想点击 - 拖动没有实现任何目的。此外，该代码仅适用于触摸屏设备，因此我无需担心处理点击和 touchstart 。

Cordova 300ms延迟

1 个答案: