手机浏览器Javascript事件

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

  1 <!-- HTML5 -->
  2 <!DOCTYPE html>
  3 <html>
  4     <head>
  5         <title>TouchEvent测试</title>
  6         <meta charset="gbk">
  7     </head>
  8     <body>
  9         <h2>TouchEvent测试</h2>
 10         <br />
 11         <div id="version" style="border:2px solid black;background-color:yellow"></div>
 12         <br />
 13         <br />
 14         <br />
 15         <br />
 16         <br />
 17         <br />
 18         <div id="result" style="border:2px solid red; color:red;">未触发事件！</div>
 19         <div id="test" style="border:2px solid red">
 20             <ul>
 21                 <li id="li1">测试1</li>
 22                 <li id="li2">测试2</li>
 23                 <li id="li3">测试3</li>
 24                 <li id="li4">测试4</li>
 25                 <li id="li5">测试5</li>
 26                 <li id="li6">测试6</li>
 27                 <li id="li7">测试7</li>
 28                 <li id="li8">测试8</li>
 29                 <li id="li9">测试9</li>
 30                 <li id="li10">测试10</li>
 31                 <li id="li11">测试11</li>
 32                 <li id="li12">测试12</li>
 33                 <li id="li13">测试13</li>
 34                 <li id="li14">测试14</li>
 35                 <li id="li15">测试15</li>
 36                 <li id="li16">测试16</li>
 37                 <li id="li17">测试17</li>
 38                 <li id="li18">测试18</li>
 39                 <li id="li19">测试19</li>
 40                 <li id="li20">测试20</li>
 41             </ul>
 42         </div>
 43         
 44         <script type="text/javascript">
 45             //全局变量，触摸开始位置
 46             var startX = 0, startY = 0;
 47             
 48             //touchstart事件
 49             function touchSatrtFunc(evt) {
 50                 try
 51                 {
 52                     //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
 53 
 54                     var touch = evt.touches[0]; //获取第一个触点
 55                     var x = Number(touch.pageX); //页面触点X坐标
 56                     var y = Number(touch.pageY); //页面触点Y坐标
 57                     //记录触点初始位置
 58                     startX = x;
 59                     startY = y;
 60 
 61                     var text = 'TouchStart事件触发：（' + x + ', ' + y + '）';
 62                     document.getElementById("result").innerHTML = text;
 63                 }
 64                 catch (e) {
 65                     alert('touchSatrtFunc：' + e.message);
 66                 }
 67             }
 68 
 69             //touchmove事件，这个事件无法获取坐标
 70             function touchMoveFunc(evt) {
 71                 try
 72                 {
 73                     //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
 74                     var touch = evt.touches[0]; //获取第一个触点
 75                     var x = Number(touch.pageX); //页面触点X坐标
 76                     var y = Number(touch.pageY); //页面触点Y坐标
 77 
 78                     var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';
 79 
 80                     //判断滑动方向
 81                     if (x - startX != 0) {
 82                         text += '<br/>左右滑动';
 83                     }
 84                     if (y - startY != 0) {
 85                         text += '<br/>上下滑动';
 86                     }
 87 
 88                     document.getElementById("result").innerHTML = text;
 89                 }
 90                 catch (e) {
 91                     alert('touchMoveFunc：' + e.message);
 92                 }
 93             }
 94 
 95             //touchend事件
 96             function touchEndFunc(evt) {
 97                 try {
 98                     //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
 99 
100                     var text = 'TouchEnd事件触发';
101                     document.getElementById("result").innerHTML = text;
102                 }
103                 catch (e) {
104                     alert('touchEndFunc：' + e.message);
105                 }
106             }
107 
108             //绑定事件
109             function bindEvent() {
110                 document.addEventListener('touchstart', touchSatrtFunc, false);
111                 document.addEventListener('touchmove', touchMoveFunc, false);
112                 document.addEventListener('touchend', touchEndFunc, false);
113             }
114 
115             //判断是否支持触摸事件
116             function isTouchDevice() {
117                 document.getElementById("version").innerHTML = navigator.appVersion;
118 
119                 try {
120                     document.createEvent("TouchEvent");
121                     alert("支持TouchEvent事件！");
122 
123                     bindEvent(); //绑定事件
124                 }
125                 catch (e) {
126                     alert("不支持TouchEvent事件！" + e.message);
127                 }
128             }
129 
130             window.onload = isTouchDevice;
131     </script>
132     </body>
133 </html>

jQuery Mobile实现上下滑动的方式：

jQuery Mobile左右滑动事件：swipe（水平滑动30px以上时触发）、swipeLeft（向左滑）、swipeRight（向右滑）

jQuery Mobile垂直滑动事件：scrollstart（上下滚动）、scrollend（滚动停止）

jQuery Mobile触摸点击事件：tap（快速触碰）、taphold（触碰并保持750ms以上触发）

<!DOCTYPE html>
<html>
    <head>
        <title>Ajax测试</title>
        <meta charset="gbk">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.2.0.min.css"/>
        <link rel="stylesheet" href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/>
        <script src="jquery-mobile/jquery-1.8.2.min.js"></script>
        <script src="jquery-mobile/jquery.mobile-1.2.0.min.js"></script>
    </head>
    <body>
        <div data-role="page" data-theme="b">
        <div data-role="header"></div>
        <div data-role="content">
            <script>
                //scrollstart事件
                function scrollstartFunc(evt) {
                    try
                    {
                        var target = $(evt.target);
                        while (target.attr("id") == undefined) {
                            target = target.parent();
                        }
                        //获取触点目标id属性值
                        var targetId = target.attr("id");

                        alert("targetId: " + targetId);
                    }
                    catch (e) {
                        alert('myscrollfunc：' + e.message);
                    }
                }

                function myinit() {
                    //绑定上下滑动事件
                    $("#myul").bind('scrollstart', function () { scrollstartFunc(event); });
                }

                window.onload = myinit;
            </script>

            <!-- listview测试 -->
            <ul id="myul" data-role="listview" data-inset="true">
                <li data-role="list-divider">信息列表</li>
                <li id="li1" data-role="fieldcontain">信息1</li>
                <li id="li2" data-role="fieldcontain">信息2</li>
                <li id="li3" data-role="fieldcontain">信息3</li>
                <li id="li4" data-role="fieldcontain">信息4</li>
                <li id="li5" data-role="fieldcontain">信息5</li>
                <li id="li6" data-role="fieldcontain">信息6</li>
                <li id="li7" data-role="fieldcontain">信息7</li>
                <li id="li8" data-role="fieldcontain">信息8</li>
                <li id="li9" data-role="fieldcontain">信息9</li>
                <li id="li10" data-role="fieldcontain">信息10</li>
            </ul>
        </div>
    </body>
</html>

 

posted @ 2014-10-10 16:27  翱翔软件  阅读(6737)  评论(0)    收藏  举报

欢迎访问翱翔软件