来源:http://itssh.cn/post/903.html
在Android下直接使用touchmove事件会在很多浏览器中出现每次操作只触发一次touchmove的情况。这是因为Android中对触屏事件奇葩解析造成的,在touchmove触发的瞬间就触发了touchcancel,后续事件就不执行了,所以要在touchmove或者touchstart事件触发的时候禁止它的默认行为。
英语文档地址:http://wilsonpage.co.uk/touch-events-in-chrome-android/
案例(请在安卓低版本手持设备中测试):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>touchmove执行一次问题</title>
<!--
@author:SM
@email:sm0210@qq.com
-->
</head>
<body>
<div id="tdivInfo" style="border:1px solid red;min-height: 50px;">
这是div
</div>
<!--在touchstart中添加e.preventDefault();-->
<script type="text/javascript">
var td = document.getElementById('tdivInfo');
td.addEventListener("touchstart", function(e){e.preventDefault();td.innerHTML+='start....<br/>';}, false)
td.addEventListener("touchmove", function(e){td.innerHTML+='move....<br/>';}, false)
td.addEventListener("touchend", function(e){td.innerHTML+='end....<br/>';}, false)
</script>
</body>
</html>
网友评论