以下经过本人测试成功。

测试平台：三星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. 【实习记】2014-08-18使用curl排错http头的content-length

        总结一,用curl排错Content-Length设置错误,误导了客户端. 访问/cgi-bin/txproj_list时,firebug显示总是不多不少15秒,调试其他问题时郁闷. fire ...

  2. Java学习----集合函数

    1.List----有序的collection(序列) 与数组的不同:数据类型可以相同可以不同,数组的长度是预先定义好的,集合的长度也是预先定义好的,但是长度会随着元素的增加而增加 ArrayList ...

  3. 深入了解jquery中的键盘事件

    很多时候,我们需要获取用户的键盘事件,下面就一起来看看jquery是如何操作键盘事件的. 一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() k ...

  4. 鸟哥的linux私房菜——第12章 正则表达式与文件格式化处理

    12.1什么是正则表达式 正则表达式就是处理字符串的方法,它是以行为单位来进行字符串的处理行为,正则表达式通过一些特殊符号的辅助,可以让用户轻易达到查找.删除.替换某特定字符串的处理程序. vi.gr ...

  5. 聊一聊c++中指针为空的三种写法 ----->NULL, 0, nullptr

    看到同事用了一下nullptr.不是很了解这方面东东,找个帖子学习学习 http://www.cppblog.com/airtrack/archive/2012/09/16/190828.aspx N ...

  6. 谈谈python中的 lambda

    最近刚开始学习python,然后要加几个python的群去学习学习,但是呢有个群的申请栏要求写一个用lambda求1-100的和.....然后悲剧的就是不会啊....然后就没有然后了... 所以去网上 ...

  7. shuffle ----- mr 董西城

    http://dongxicheng.org/framework-on-yarn/apache-spark-shuffle-details/

  8. [BZOJ 1901] Dynamic Rankings 【树状数组套线段树 || 线段树套线段树】

    题目链接:BZOJ - 1901 题目分析 树状数组套线段树或线段树套线段树都可以解决这道题. 第一层是区间,第二层是权值. 空间复杂度和时间复杂度均为 O(n log^2 n). 线段树比树状数组麻 ...

  9. The state of binary data in the browser

    The state of binary data in the browser Or: "So you wanna store a Blob, huh?" TL;DR Don't ...

  10. Debug和Release之本质区别

    转自Debug和Release之本质区别 Debug 和 Release 编译方式的本质区别 Debug 通常称为调试版本,它包含调试信息,并且不作任何优化,便于程序员调试程序.Release 称为发 ...