美文网首页1024Web 前端开发
安卓原生浏览器touch事件中touchmove执行一次问题

安卓原生浏览器touch事件中touchmove执行一次问题

作者: 圆梦人生 | 来源:发表于2016-09-29 17:18 被阅读1312次

    来源: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>
    

    来源:http://itssh.cn/post/903.html

    相关文章

      网友评论

        本文标题:安卓原生浏览器touch事件中touchmove执行一次问题

        本文链接:https://www.haomeiwen.com/subject/nbflyttx.html