zoukankan      html  css  js  c++  java

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

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

    2013-02-28 11:57 78267人阅读 评论(9) 收藏 举报
    分类：

    版权声明：本文为博主原创文章，未经博主允许不得转载。

    以下经过本人测试成功。

    测试平台：三星S5830I

    操作系统：Android 2.3.6

    浏览器：UC浏览器

    HTML标准：HTML5

     

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

    代码如下：

    [html] view plain copy
    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以上触发）

     

    [html] view plain copy
      1. <!DOCTYPE html>  
      2. <html>  
      3.     <head>  
      4.         <title>Ajax测试</title>  
      5.         <meta charset="gbk">  
      6.         <meta name="viewport" content="width=device-width, initial-scale=1">  
      7.         <link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.2.0.min.css"/>  
      8.         <link rel="stylesheet" href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/>  
      9.         <script src="jquery-mobile/jquery-1.8.2.min.js"></script>  
      10.         <script src="jquery-mobile/jquery.mobile-1.2.0.min.js"></script>  
      11.     </head>  
      12.     <body>  
      13.         <div data-role="page" data-theme="b">  
      14.         <div data-role="header"></div>  
      15.         <div data-role="content">  
      16.             <script>  
      17.                 //scrollstart事件  
      18.                 function scrollstartFunc(evt) {  
      19.                     try  
      20.                     {  
      21.                         var target = $(evt.target);  
      22.                         while (target.attr("id") == undefined) {  
      23.                             target = target.parent();  
      24.                         }  
      25.                         //获取触点目标id属性值  
      26.                         var targetId = target.attr("id");  
      27.   
      28.                         alert("targetId: " + targetId);  
      29.                     }  
      30.                     catch (e) {  
      31.                         alert('myscrollfunc：' + e.message);  
      32.                     }  
      33.                 }  
      34.   
      35.                 function myinit() {  
      36.                     //绑定上下滑动事件  
      37.                     $("#myul").bind('scrollstart', function () { scrollstartFunc(event); });  
      38.                 }  
      39.   
      40.                 window.onload = myinit;  
      41.             </script>  
      42.   
      43.             <!-- listview测试 -->  
      44.             <ul id="myul" data-role="listview" data-inset="true">  
      45.                 <li data-role="list-divider">信息列表</li>  
      46.                 <li id="li1" data-role="fieldcontain">信息1</li>  
      47.                 <li id="li2" data-role="fieldcontain">信息2</li>  
      48.                 <li id="li3" data-role="fieldcontain">信息3</li>  
      49.                 <li id="li4" data-role="fieldcontain">信息4</li>  
      50.                 <li id="li5" data-role="fieldcontain">信息5</li>  
      51.                 <li id="li6" data-role="fieldcontain">信息6</li>  
      52.                 <li id="li7" data-role="fieldcontain">信息7</li>  
      53.                 <li id="li8" data-role="fieldcontain">信息8</li>  
      54.                 <li id="li9" data-role="fieldcontain">信息9</li>  
      55.                 <li id="li10" data-role="fieldcontain">信息10</li>  
      56.             </ul>  
      57.         </div>  
      58.     </body>  
      59. </html> 
  • 相关阅读:
    「UVA12293」 Box Game
    「CF803C」 Maximal GCD
    「CF525D」Arthur and Walls
    「CF442C」 Artem and Array
    LeetCode lcci 16.03 交点
    LeetCode 1305 两棵二叉搜索树中的所有元素
    LeetCode 1040 移动石子直到连续 II
    LeetCode 664 奇怪的打印机
    iOS UIPageViewController系统方法崩溃修复
    LeetCode 334 递增的三元子序列
  • 原文地址：https://www.cnblogs.com/shsgl/p/5829273.html
Copyright © 2011-2022 走看看