Touchstart事件从不在首次加载页面时在Android Chrome上触发?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (9)

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

我的环境是:

  1. Nexus 7(2013)
  2. Android 4.30内部编号为JSS15Q
  3. Chrome 29.0.1547.72(WebKit版本537.36(@ 156722),JavaScript版本V8 3.19.18.21)
提问于
用户回答回答于

你的html标记和js似乎运作良好。你应该检查元素是否需要处理“touchstart”,而你的真实标记具有“title”属性。这可能是一个原因,使它不会在第一次触摸时开枪。

用户回答回答于

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

扫码关注云+社区