Android Chrome不会在第一次加载页面时触发Touchstart事件
Android Chrome不会在第一次加载页面时触发Touchstart事件
提问于 2013-09-18 12:30:35
在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>我的环境是，
- Nexus7(2013年)
- 安卓4.30内部版本号JSS15Q
- Chrome 29.0.1547.72 (WebKit版本537.36(@1547.72)，JavaScript版本V8 3.19.18.21)
回答 6
Stack Overflow用户
发布于 2016-03-28 01:23:38
也许可以尝试延迟添加事件侦听器，直到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>代码在重新加载时工作的事实可能表明在第一次加载页面时添加事件侦听器的速度太快了？
Stack Overflow用户
发布于 2016-09-23 17:10:42
您的html标记和js似乎工作得很好。您应该检查元素是否需要在您的实际标记中处理"touchstart“是否具有"title”属性。这可能是它不会在第一次接触时开火的一个原因。
Stack Overflow用户
发布于 2017-02-15 23:52:29
我猜这和你的Chrome版本有关。你的代码在Chrome Dev 58.0.3007.3 (安卓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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18863870
复制相关文章
相似问题
腾讯云开发者
