Javascript 首次加载页面时，Android Chrome上永远不会触发Touchstart事件_Javascript_Android_Google Chrome

Javascript 首次加载页面时，Android Chrome上永远不会触发Touchstart事件

javascript android google-chrome

Javascript 首次加载页面时，Android Chrome上永远不会触发Touchstart事件,javascript,android,google-chrome,Javascript,Android,Google Chrome,在Android Chrome上，当您创建一个新选项卡并访问包含以下内容的页面时，您对#touch div的触摸从未触发触摸开始事件。重新加载页面后，可以触发事件为什么?？我怎样才能避免这种情况 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>touch start on Android</title> <style type="

在Android Chrome上，当您创建一个新选项卡并访问包含以下内容的页面时，您对#touch div的触摸从未触发触摸开始事件。重新加载页面后，可以触发事件

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

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


触摸Android上的开始
#触摸，#单击{
位置：相对位置；
左：100px；
顶部：100px；
宽度：200px；
高度：200px；
边框：实心1px黑色；
}
触碰
点击
document.getElementById（'touch'）.addEventListener（'touchstart'，函数（）{alert（'touch'）；}，false）；
document.getElementById（'click'）.addEventListener（'click'，函数（）{alert（'click'）；}，false）；

我的环境是，

Nexus 7（2013年）

安卓4.30版本号JSS15Q

Chrome 29.0.1547.72（WebKit版本537.36（@156722），JavaScript版本V8 3.19.18.21）

在旧的WebKit版本中，触摸事件存在一些奇怪的bug。看看这个bug报告：

诀窍是在

touchstart

事件处理程序中添加

e.preventDefault（）。这是必需的，因为浏览器处理本机滚动的方式
project提供了另一个解决方案和一些详细信息：
在某些Android设备上，当用户触摸屏幕时触发touchstart事件，Android会将该事件传递给WebView（javascript）进行处理。如果WebView没有默认设置（在200毫秒内），Android将恢复本机滚动并停止向WebView传递触摸事件
解决这个问题的方法主要是在touchstart上使用默认设置，并使用javascript手动滚动
这种行为已嵌入数百万安卓设备中，无法从源头上纠正
此垫片通过覆盖可本机滚动的包含元素提供解决方案，并根据其滚动偏移触发滑动事件，允许软件在启用本机滚动的情况下处理移动事件
可能尝试延迟添加事件侦听器，直到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>


函数touchTest（）{
document.getElementById（'touch'）.addEventListener（'touchstart'，函数（）{alert（'touch'）；}，false）；
document.getElementById（'click'）.addEventListener（'click'，函数（）{alert（'click'）；}，false）；
}
文件。addEventListener（'DOMContentLoaded'，touchTest）；

代码在重新加载时工作的事实可能表明事件侦听器在加载第一页时添加得太快了？
您的html标记和js似乎工作得很好。您应该检查元素是否需要处理实际标记中的“touchstart”是否具有“title”属性。这可能是一个原因，使它不能在第一次接触时开火。我猜这与您的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>


触摸Android上的开始
#触摸，#单击{
位置：相对位置；
左：100px；
顶部：100px；
宽度：200px；
高度：200px；
边框：实心1px黑色；
}
函数startListening（）{
document.getElementById（“touch”）.addEventListener（“touchstart”，function（）{alert（“touch”）；}，false）；
document.getElementById（“click”）.addEventListener（“click”，function（）{alert（“click”）；}，false）；
}
触碰
点击
是的，我也通过在文档中添加触摸移动事件进行了修复
将以下代码添加到JS文件中
这应该行得通
document.addEventListener("touchmove",function(){})

试试这个。加载页面时，javascript将运行您的代码。
这是您问题的Jquery解决方案（如果可行的话）。
如果您不想使用jquery，您可以找到javascript的等价形式
$（文件）。准备好了吗
我也有同样的问题。你找到解决办法了吗？虽然只有在我使用新的、干净的Chrome Android实例时，我的错误才会受到影响……但这个错误已经困扰了我好几天了。你找到解决方案了吗？到目前为止有解决方案吗？这不适用。事件根本不会被触发。touchstart永远不会触发您调用e.preventDefault（）；
$(document).ready(function(){
  document.getElementById('touch').addEventListener('touchstart', function () { alert ('touch'); } , false);
  document.getElementById('click').addEventListener('click', function () { alert('click'); } , false);
});