TouchEvent测试

大 | 中 | 小
[不指定 2015/11/08 20:44 | by 刘新修 ]
XML/HTML代码
  1. <!-- HTML5 -->    
  2. <!DOCTYPE html>    
  3. <html>    
  4.     <head>    
  5.         <title>TouchEvent测试</title>    
  6.         <meta charset="utf-8">  
  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>    
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(4520)