23

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

我的环境是

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

6 回答 6

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>

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

于 2016-03-27T17:23:38.193 回答
0 
$(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

于 2017-05-23T11:36:42.817 回答
0

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

于 2016-09-23T09:10:41.587 回答
0

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

document.addEventListener("touchmove",function(){})
于 2017-04-10T08:56:57.820 回答
0

我猜这与您的 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>
于 2017-02-15T15:52:29.077 回答
-3

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

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

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

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

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

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

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

于 2015-04-11T18:24:47.900 回答