以下经过本人测试成功。

测试平台：三星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. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  2. angularjs入门整理

    之前发过一篇博文,从mobile angular ui的demo和其官网初识整个angularjs的大体使用,但是没很好学习,只是通过一些技术博文初步认识,陷入很多坑.所以现在在中文官网正式整理下知识 ...

  3. mysql备份sql，脚本

    MySQL 安装位置:/usr/local/mysq 论坛数据库名称为:bbs MySQL root 密码:123456 数据库备份目的地:/var/db_backup/ #! /bin/bash / ...

  4. JavaScript学习心得（十）

    Ajax Ajax是浏览器中使用JavaScript进行服务器后台请求,读取附加信息或者导致服务器响应的过程. Ajax广泛用于从服务器读取数据,并用所得到的数据更新页面,以及向服务器发送数据 Aja ...

  5. 简单学C——第六天

    指针    指针是c语言中很灵活的一个内容,当然,灵活的都是较难掌握的.不过,只要理解其实质,学习,运用指针还是一件很轻松的事情的. 首先理解,1.什么是指针? 在c语言中,指针也同Int ,doub ...

  6. uboot环境变量区为何不能放在data段

    一.疑问 环境变量也是全局变量,为何不能像其他的全局变量放在data段呢?为什么要放在堆中或者使用ENV_IS_EMBEDDED定义的CFG_ENV_SIZE的空间大小,又为什么需要这么大的空间呢? ...

  7. virtalBox共享文件夹设置

    sudo mount -t vboxsf gongxiang /mnt/shared/

  8. Test for open live write

    this is test document. this is test document. this is test document. this is test document. this is ...

  9. 菜鸟的ubuntu学习笔记

    初识ubuntu感觉这个系统绝对够高大上,简洁的桌面,流畅的操作界面,在加上神秘的终端控制,突然感觉自己的世界真的好渺小,所以我下定决心在接下来的日子里我要告别windows,把ubuntu学好,尝试 ...

  10. tyvj 普通平衡树 SBT or splay

    普通平衡树 From admin     背景 Background 此为平衡树系列第一道:普通平衡树     描述 Description 您需要写一种数据结构(可参考题目标题),来维护一些数,其中 ...