科尔多瓦 300 毫秒延迟答案

【问题标题】：Cordova 300ms delay科尔多瓦 300 毫秒延迟
【发布时间】：2017-07-17 19:46:56
【问题描述】：

简单的问题。我有一个 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 毫秒延迟。然而，我遵循了所有建议：

宽度=device-width 和 minimum-scale=1.0, maximum-scale=1.0 的视口元数据
触摸动作：操纵，等

我尝试使用 fasclick.js，但没有结果。这是正常的，因为正如文档中所述，自 chrome 32+ 以来它已无用。

我怀疑 :active 所以我尝试使用 javascript 更改后台处理 onclick() 事件，而不是在 HTML 中使用 onclick。结果相同，平板电脑出现延迟。

Android 是 6.0。科尔多瓦 7.0.1。

有什么想法吗？

【问题讨论】：

标签： cordova onclick delay

【解决方案1】：

点击触摸屏的延迟按设计 - 它用于区分拖动/滑动（触摸时触摸并移动）和点击（触摸并按住在同一位置）。

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

我的应用程序的界面设计是这样的，用户只想点击 - 拖动不会实现任何效果。此外，该代码仅针对触摸屏设备设计，因此我无需担心同时处理点击和 touchstart。

【讨论】：