判断手机滑动事件

<!-- 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 + '';



                    //判断滑动方向

                    

                    //console.log('左右'+x)

                    //console.log('上下'+y)

                    

                    if(startX>x){

                        console.log('向左滑动')

                    }else{

                        console.log('向右滑动');

                    }

                    

                    if(startY>y){

                        console.log('向上滑动');

                    }else{

                        console.log('向下滑动');

                    }



                    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>

 

你可能感兴趣的:(事件)