移动设备、手机浏览器Javascript滑动事件代码

最新推荐文章于 2024-03-08 22:40:04 发布

元生态

最新推荐文章于 2024-03-08 22:40:04 发布

阅读量711

点赞数

分类专栏： jquery

jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

测试了三个事件：touchstart、touchmove 和 touchend，并获取了触摸时触点在页面上的坐标，根据坐标进行了左右滑动、上下滑动判断。

代码如下：

    <!-- HTML5 -->  
    <!DOCTYPE html>  
    <html>  
        <head>  
            <title>TouchEvent测试</title>  
            <meta charset="gbk">  
        </head>  
        <body>  
            <h2>TouchEvent测试</h2>  
            <br />  
            <div id="version" style="border:2px solid black;background-color:yellow"></div>  
            <br />  
            <br />  
            <br />  
            <br />  
            <br />  
            <br />  
            <div id="result" style="border:2px solid red; color:red;">未触发事件！</div>  
            <div id="test" style="border:2px solid red">  
                <ul>  
                    <li id="li1">测试条目1</li>  
                    <li id="li2">测试条目2</li>  
                    <li id="li3">测试条目3</li>  
                    <li id="li4">测试条目4</li>  
                    <li id="li5">测试条目5</li>  
                    <li id="li6">测试条目6</li>  
                    <li id="li7">测试条目7</li>  
                    <li id="li8">测试条目8</li>  
                    <li id="li9">测试条目9</li>  
                    <li id="li10">测试条目10</li>  
                    <li id="li11">测试条目11</li>  
                    <li id="li12">测试条目12</li>  
                    <li id="li13">测试条目13</li>  
                    <li id="li14">测试条目14</li>  
                    <li id="li15">测试条目15</li>  
                    <li id="li16">测试条目16</li>  
                    <li id="li17">测试条目17</li>  
                    <li id="li18">测试条目18</li>  
                    <li id="li19">测试条目19</li>  
                    <li id="li20">测试条目20</li>  
                </ul>  
            </div>  
              
            <script type="text/javascript">  
                //全局变量，触摸开始位置  
                var startX = 0, startY = 0;  
                  
                //touchstart事件  
                function touchSatrtFunc(evt) {  
                    try  
                    {  
                        //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
      
                        var touch = evt.touches[0]; //获取第一个触点  
                        var x = Number(touch.pageX); //页面触点X坐标  
                        var y = Number(touch.pageY); //页面触点Y坐标  
                        //记录触点初始位置  
                        startX = x;  
                        startY = y;  
      
                        var text = 'TouchStart事件触发：（' + x + ', ' + y + '）';  
                        document.getElementById("result").innerHTML = text;  
                    }  
                    catch (e) {  
                        alert('touchSatrtFunc：' + e.message);  
                    }  
                }  
      
                //touchmove事件，这个事件无法获取坐标  
                function touchMoveFunc(evt) {  
                    try  
                    {  
                        //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
                        var touch = evt.touches[0]; //获取第一个触点  
                        var x = Number(touch.pageX); //页面触点X坐标  
                        var y = Number(touch.pageY); //页面触点Y坐标  
      
                        var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';  
      
                        //判断滑动方向  
                        if (x - startX != 0) {  
                            text += '<br/>左右滑动';  
                        }  
                        if (y - startY != 0) {  
                            text += '<br/>上下滑动';  
                        }  
      
                        document.getElementById("result").innerHTML = text;  
                    }  
                    catch (e) {  
                        alert('touchMoveFunc：' + e.message);  
                    }  
                }  
      
                //touchend事件  
                function touchEndFunc(evt) {  
                    try {  
                        //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
      
                        var text = 'TouchEnd事件触发';  
                        document.getElementById("result").innerHTML = text;  
                    }  
                    catch (e) {  
                        alert('touchEndFunc：' + e.message);  
                    }  
                }  
      
                //绑定事件  
                function bindEvent() {  
                    document.addEventListener('touchstart', touchSatrtFunc, false);  
                    document.addEventListener('touchmove', touchMoveFunc, false);  
                    document.addEventListener('touchend', touchEndFunc, false);  
                }  
      
                //判断是否支持触摸事件  
                function isTouchDevice() {  
                    document.getElementById("version").innerHTML = navigator.appVersion;  
      
                    try {  
                        document.createEvent("TouchEvent");  
                        alert("支持TouchEvent事件！");  
      
                        bindEvent(); //绑定事件  
                    }  
                    catch (e) {  
                        alert("不支持TouchEvent事件！" + e.message);  
                    }  
                }  
      
                window.onload = isTouchDevice;  
        </script>  
        </body>  
    </html>

js的左右滑动触屏事件，主要有三个事件：touchstart，touchmove，touchend。这三个事件最重要的属性是pageX和 pageY,表示X,Y坐标。

touchstart在触摸开始时触发事件

touchend在触摸结束时触发事件

touchmove这个事件比较奇怪，按道理在触摸到过程中不断激发这个事件才对，但是在我的 Android 1.5 中，在touchstart 激发后激发一次，然后剩余的都和 touchend 差不多同时激发。

这三个事件都都有一个 timeStamp 的属性，查看 timeStamp 属性，可以看到顺序是 touchstart-> touchmove ->touchmove-> … -> touchmove->touchend。

下面是一段代码实例：

document.getElementsByTagName_r('body')[0].addEventListener('touchstart',function (e) {
       nStartY = e.targetTouches[0].pageY;
       nStartX = e.targetTouches[0].pageX;
    });

document.getElementsByTagName_r('body')[0].addEventListener('touchend',function (e) {
nChangY = e.changedTouches[0].pageY;
nChangX = e.changedTouches[0].pageX;