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> 
  • 相关阅读:
    Java 之 Maven 基础
    JavaScript 之 RegExp 对象
    Java 之 Jedis
    Java 之 Redis 基础
    Java 之 NOSQL
    JavaWeb 之 JSON
    JavaWeb 之 Ajax
    【LeetCode-数组】外观数列
    【LeetCode-树】从先序遍历还原二叉树
    【LeetCode-数组】搜索二维矩阵 II
  • 原文地址：https://www.cnblogs.com/shsgl/p/5829273.html
Copyright © 2011-2022 走看看