以下经过本人测试成功。

测试平台：三星S5830I

操作系统：Android 2.3.6

浏览器：UC浏览器

HTML标准：HTML5

测试了三个事件：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. <script type="text/javascript">
  44. //全局变量，触摸开始位置
  45. var startX = 0, startY = 0;
  46. //touchstart事件
  47. function touchSatrtFunc(evt) {
  48. try
  49. {
  50. //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
  51. var touch = evt.touches[0]; //获取第一个触点
  52. var x = Number(touch.pageX); //页面触点X坐标
  53. var y = Number(touch.pageY); //页面触点Y坐标
  54. //记录触点初始位置
  55. startX = x;
  56. startY = y;
  57. var text = 'TouchStart事件触发：（' + x + ', ' + y + '）';
  58. document.getElementById("result").innerHTML = text;
  59. }
  60. catch (e) {
  61. alert('touchSatrtFunc：' + e.message);
  62. }
  63. }
  64. //touchmove事件，这个事件无法获取坐标
  65. function touchMoveFunc(evt) {
  66. try
  67. {
  68. //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
  69. var touch = evt.touches[0]; //获取第一个触点
  70. var x = Number(touch.pageX); //页面触点X坐标
  71. var y = Number(touch.pageY); //页面触点Y坐标
  72. var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';
  73. //判断滑动方向
  74. if (x - startX != 0) {
  75. text += '<br/>左右滑动';
  76. }
  77. if (y - startY != 0) {
  78. text += '<br/>上下滑动';
  79. }
  80. document.getElementById("result").innerHTML = text;
  81. }
  82. catch (e) {
  83. alert('touchMoveFunc：' + e.message);
  84. }
  85. }
  86. //touchend事件
  87. function touchEndFunc(evt) {
  88. try {
  89. //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
  90. var text = 'TouchEnd事件触发';
  91. document.getElementById("result").innerHTML = text;
  92. }
  93. catch (e) {
  94. alert('touchEndFunc：' + e.message);
  95. }
  96. }
  97. //绑定事件
  98. function bindEvent() {
  99. document.addEventListener('touchstart', touchSatrtFunc, false);
  100. document.addEventListener('touchmove', touchMoveFunc, false);
  101. document.addEventListener('touchend', touchEndFunc, false);
  102. }
  103. //判断是否支持触摸事件
  104. function isTouchDevice() {
  105. document.getElementById("version").innerHTML = navigator.appVersion;
  106. try {
  107. document.createEvent("TouchEvent");
  108. alert("支持TouchEvent事件！");
  109. bindEvent(); //绑定事件
  110. }
  111. catch (e) {
  112. alert("不支持TouchEvent事件！" + e.message);
  113. }
  114. }
  115. window.onload = isTouchDevice;
  116. </script>
  117. </body>
  118. </html>

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

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

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

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

  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. alert("targetId: " + targetId);
  28. }
  29. catch (e) {
  30. alert('myscrollfunc：' + e.message);
  31. }
  32. }
  33. function myinit() {
  34. //绑定上下滑动事件
  35. $("#myul").bind('scrollstart', function () { scrollstartFunc(event); });
  36. }
  37. window.onload = myinit;
  38. </script>
  39. <!-- listview测试 -->
  40. <ul id="myul" data-role="listview" data-inset="true">
  41. <li data-role="list-divider">信息列表</li>
  42. <li id="li1" data-role="fieldcontain">信息1</li>
  43. <li id="li2" data-role="fieldcontain">信息2</li>
  44. <li id="li3" data-role="fieldcontain">信息3</li>
  45. <li id="li4" data-role="fieldcontain">信息4</li>
  46. <li id="li5" data-role="fieldcontain">信息5</li>
  47. <li id="li6" data-role="fieldcontain">信息6</li>
  48. <li id="li7" data-role="fieldcontain">信息7</li>
  49. <li id="li8" data-role="fieldcontain">信息8</li>
  50. <li id="li9" data-role="fieldcontain">信息9</li>
  51. <li id="li10" data-role="fieldcontain">信息10</li>
  52. </ul>
  53. </div>
  54. </body>
  55. </html>

移动设备、手机浏览器Javascript滑动事件代码的更多相关文章

  1. 让你的 vs code 跑在云上，用手机浏览器就能写代码

    让你的vs code 跑在云服务器上 在B站上看到一个视频Run VS Code in the browser with massive computing resources(教你如何配置一个云ID ...

  2. 【转】让iframe在iOS设备手机浏览器上支持滚动

    HTML代码 在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们: <div class="scroll-wrapper"> <i ...

  3. html5滑动事件代码

    $(".header").on("touchstart", function(e) { // 判断默认行为是否可以被禁用 if (e.cancelable) { ...

  4. 关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧

    1.移动端开发往往需要添加一下自定义的左右滑动事件,但是添加了左右滑动事件之后就要阻止浏览器大默认事件,否则dom节点的滑动事件和浏览器本身的滑动会出现冲突,导致滑动的时候会出现消失瞬间再出现的效果 ...

  5. JavaScript 浏览器中的事件

    1.事件的基本概念 事件是指在文档或者浏览器中发生的一些特定交互瞬间,比如打开某一个网页,浏览器加载完成后会触发 load 事件,当鼠标悬浮于某一个元素上时会触发 hover 事件,当鼠标点击某一个元 ...

  6. TraceGL监控Node.js应用或者浏览器JavaScript代码

    https://github.com/traceglMPL/tracegl TraceGL能够监控Node.js应用或者浏览器JavaScript代码的运行过程和细节.可视化的用户界面也很友好

  7. 手机浏览器下IScroll中click事件

    产品的h5页面几乎都使用了iscroll插件,如果a标签在iscroll里,在部分手机浏览器中会出现无法点击的情况,不管是绑定click事件还是使用a标签的href属性.href属性偶尔还会能点击,c ...

  8. JavaScript在智能手机上的应用-测试是否支持滑动事件

    ---------------------------- <script type="text/javascript">                        ...

  9. iphone手机浏览器文本框不触发输入中文的keyup事件

    问题描述:iphone手机浏览器文本框不触发输入中文的keyup事件,在输入中文之后需要点击回退按键,才会开始搜索.问题分析:iphone手机的输入法(不管是第三方还是自带)能检测到英文或者数字的ke ...

随机推荐

  1. Apache提示You don't have permission to access / on this server问题解决

    测试时遇到将一本地目录设置为一apache的虚拟主机,在httpd-vhosts.conf文件中进行简单设置,然后在hosts文件中将访问地址指向本地,启动apache,进行访问,却出现了You do ...

  2. Android 6.0 Permission权限与安全机制

    Marshmallow版本权限修改 android的权限系统一直是首要的安全概念,因为这些权限只在安装的时候被询问一次.一旦安装了,app可以在用户毫不知晓的情况下访问权限内的所有东西,而且一般用户安 ...

  3. 界面信息获取库的封装，记有爱UI助手的诞生

    距离上次写文章已经过去了10个月,这次把我最近做的一个东西的一些心得写下来吧. 上一篇文章写了MSAA技术对于QQ界面信息获取的相关知识,近一段时间我把这个技术包括一些其他的功能做了一个封装并准备公开 ...

  4. GHOST备份

    整理日: 2015年2月16日 GHOST Disk2GHO STEP01 STEP02 STEP03 STEP04 STEP05 STEP06 STEP07 STEP08 STEP09 STEP10

  5. 我的前端之旅--SeaJs基础和spm编译工具运用[图文]

    标签:seajs   nodejs   npm   spm   js 1. 概述 本文章来源于本人在项目的实际应用中写下的记录.因初期在安装和使用Seajs和SPM的时候,有点不知所措的经历.为此,我 ...

  6. bzoj 2818: Gcd 歐拉函數

    2818: Gcd Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1633  Solved: 724[Submit][Status] Descript ...

  7. The Model Complexity Myth

    The Model Complexity Myth (or, Yes You Can Fit Models With More Parameters Than Data Points) An oft- ...

  8. Shoot the Bullet

    zoj3229:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3442 题意:一个摄影师,在n天内给m个女神拍照.每个女神至少要 ...

  9. Water Tree

    Codeforces Round #200 (Div. 1) D:http://codeforces.com/problemset/problem/343/D 题意:给你一颗有根树,树的每个节点有一个 ...

  10. 调优UWSGI，后台启动，热更改PY，杜绝502

    记得加启动参数: --daemonize /var/log/uwsgi.log --post-buffering 32768 --buffer-size 32768 reload.set #!/bin ...