在第一次加载页面时不会在 Android Chrome 上触发 Touchstart 事件答案

【问题标题】：Touchstart event never be triggered on Android Chrome at the first time of page loading在第一次加载页面时不会在 Android Chrome 上触发 Touchstart 事件
【发布时间】：2013-09-22 17:15:45
【问题描述】：

在 Android Chrome 上，当您创建新标签并访问包含以下内容的页面时，您对 #touch div 的触摸从未触发 touch-start 事件。重新加载页面后，即可触发事件。

为什么？以及如何避免这种情况？

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>touch start on Android</title>
  <style type="text/css">
  #touch, #click {
    position: relative;
    left: 100px;
    top: 100px;
    width: 200px;
    height: 200px;
    border: solid 1px black;
  }
  </style>
</head>
<body>
  <div id="touch">Touch</div>
  <div id="click">Click</div>
  <script type="text/javascript">
  document.getElementById('touch').addEventListener('touchstart', function () { alert ('touch'); } , false);
  document.getElementById('click').addEventListener('click', function () { alert('click'); } , false);
  </script>
</body>
</html>

我的环境是，

Nexus 7 (2013)
Android 4.30 内部版本号 JSS15Q
Chrome 29.0.1547.72（WebKit 版本 537.36(@156722)，JavaScript 版本 V8 3.19.18.21）

【问题讨论】：

我也有同样的问题。您是否设法找到解决方案？虽然我的似乎只有在我使用全新且干净的 Chrome Android 实例时才会受到影响......
这个错误已经困扰我好几天了。找到解决方案了吗？
目前有解决办法吗？

标签： javascript android google-chrome

【解决方案1】：

也许尝试延迟添加事件侦听器，直到 DOM 准备好？

<script>
  function touchTest() {
    document.getElementById('touch').addEventListener('touchstart', function () { alert ('touch'); } , false);
    document.getElementById('click').addEventListener('click', function () { alert('click'); } , false);
  }

  document.addEventListener('DOMContentLoaded', touchTest);
</script>

您的代码在重新加载时工作的事实可能表明在第一个页面加载时添加事件侦听器的速度过快？

【讨论】：

【解决方案2】：

您的 html 标记和 js 似乎运行良好。您应该检查元素是否需要在您的真实标记中处理“touchstart”具有“title”属性。这可能是它在第一次接触时不会触发的原因。

【讨论】：

【解决方案3】：

我猜这与您的 Chrome 版本有关。您的代码在 Chrome Dev 58.0.3007.3（Android 7.1.1 build NMF26F）上首次加载时也能正常工作

试试这个代码修改，它在加载主体后添加监听器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>touch start on Android</title>
        <style type="text/css">
            #touch, #click  {
                position: relative;
                left: 100px;
                top: 100px;
                width: 200px;
                height: 200px;
                border: solid 1px black;
            }
        </style>
        <script type="text/javascript">
            function startListening()  {
                document.getElementById("touch").addEventListener("touchstart", function()  {alert("touch");}, false);
                document.getElementById("click").addEventListener("click", function()  {alert("click");}, false);
            }
        </script>
    </head>
    <body onload="startListening()">
        <div id="touch">Touch</div>
        <div id="click">Click</div>
    </body>
</html>

【讨论】：

【解决方案4】：

是的，我也通过在文档中添加触摸移动事件来修复将以下代码添加到您的 JS 文件中这应该工作。

document.addEventListener("touchmove",function(){})

【讨论】：

【解决方案5】：

$(document).ready(function(){
  document.getElementById('touch').addEventListener('touchstart', function () { alert ('touch'); } , false);
  document.getElementById('click').addEventListener('click', function () { alert('click'); } , false);
});

试试这个。加载页面时，javascript 将运行您的代码。这是您的问题的 Jquery 解决方案（如果有效）。如果你不想使用 jquery，你可以找到

的 javascript 等效形式

$(document).ready

【讨论】：

【解决方案6】：

在较旧的 WebKit 版本中，触摸事件存在一些奇怪的错误。看看这个错误报告：5491、19827、4549、150779。

诀窍是在touchstart 事件处理程序中添加e.preventDefault()。这是必需的，因为浏览器处理本机滚动的方式。

android-swipe-shim 项目提供了另一种解决方案和更多信息：

在某些 Android 设备上，当用户触摸屏幕时会触发 touchstart 事件，Android 会将事件传递给 WebView (javascript) 进行处理。如果 WebView 没有阻止默认（200 毫秒内），Android 会恢复原生滚动并停止将触摸事件传递给 WebView。

对此的解决方案主要是在 touchstart 上阻止默认设置并使用 javascript 手动滚动。

这种行为嵌入在数以百万计的 Android 设备中，无法从源头纠正。

这个 shim 提供了一种解决方案，它覆盖了一个可以原生滚动的包含元素，并根据其滚动偏移量触发滑动事件，允许您的软件在启用原生滚动的情况下处理移动事件。

【讨论】：

这不适用。这些事件根本不会被触发。 touchstart 永远不会触发您调用 e.preventDefault();