Touchstart 事件永远不会在网页加载的首次加载时在 Android Chrome 上触发

Touchstart event never be triggered on Android Chrome at the first time of page loading

本文关键字：加载 Android Chrome 永远 事件 Touchstart 网页      更新时间：2023-09-26

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

为什么？我怎样才能避免这种情况？

<!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>

我的环境是，

  1. 连结7 （2013）
  2. 安卓 4.30 内部版本号 JSS15Q
  3. Chrome 29.0.1547.72 （WebKit 版本 537.36（@156722）， JavaScript 版本 V8 3.19.18.21）

也许尝试延迟添加事件侦听器，直到 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>

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

你的html标记和js似乎工作得很好。您应该检查元素是否需要处理 "touchstart" 在你的实际标记中具有 "title" 属性。这可能是使其在第一次接触时不会开火的原因。

我猜这与你的Chrome版本有关。您的代码在Chrome Dev 58.0.3007.3（Android 7.1.1构建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>

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

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

$(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等效形式的

$（文档）.ready

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

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

Android-Swipe-Shim项目提供了另一种解决方案和更多信息：

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

对此的解决方案主要是在触摸启动时防止默认并使用javascript手动滚动。

此行为嵌入在数百万台 Android 设备中，无法从源头进行纠正。

此填充程序通过覆盖可本机滚动的包含元素来提供解决方案，并根据其滚动偏移量触发滑动事件，从而允许您的软件在启用本机滚动的情况下处理移动事件。

相关文章：