以下经过本人测试成功。

测试平台：三星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. getting “fatal: not a git repository: '.'” when using post-update hook to execute 'git pull' on another repo

    Here is the script that ultimately worked. I think the bit I was originally missing that prevented i ...

  2. 插入标记 方法 insertAdjacentHTML

    html5新增的插入标记方法,insertAdjacentHTML() 可以接受2个参数 插入位置和要插入的 HTML 文本.第一个参数必须是下列值之一: "beforebegin" ...

  3. C#winfrom中应用程序只启动一次代码

    static class Program    {        private const int WS_SHOWNORMAL = 1;        [DllImport("User32 ...

  4. JS判断浏览器类型以及版本号

    <script type="text/javascript">        (function(){            window.nav={};       ...

  5. C# Winform开发框架模块图(平台核心模块+示例模块)

    企业版V4.0 - 模块图   企业版V4.0 - 项目解决方案   Client/Server构架,有两个解决方案:     客户端解决方案说明:     服务端解决方案说明: C/S系统开发框架- ...

  6. android 代码混淆及问题大集锦

    最近在需要对所开发的项目进行了代码混淆,在android studio中开启代码混淆其实还是挺方便的,不过因为代码混淆产生的问题非常多,特别是对于一些涉及到反射的第三方库经常因为名称的变化导致无法使用 ...

  7. Java日志性能

    在任何系统中,日志都是非常重要的组成部分,它是反映系统运行情况的重要依据,也是排查问题时的必要线索.绝大多数人都认可日志的重要性,但是又有多少人仔细想过该怎么打日志,日志对性能的影响究竟有多大呢?今天 ...

  8. iOS,OC,图片相似度比较,图片指纹

    上周,正在忙,突然有个同学找我帮忙,说有个需求:图片相似度比较. 网上搜了一下,感觉不是很难,就写了下,这里分享给需要的小伙伴. 首先,本次采用的是OpenCV,图片哈希值: 先说一下基本思路: 1. ...

  9. Java位运算总结：位运算用途广泛《转》

    前天几天研究了下JDK的Collection接口,本来准备接着研究Map接口,可是一查看HashMap类源码傻眼咯,到处是位运算实现,所以我觉得还是有必要先补补位运算知识,不然代码看起来有点费力.今天 ...

  10. mysql 字段存储类型

    摘自:http://zuo.ai.xiao.blog.163.com/blog/static/6079155320121293750732/ 1.数字类型                        ...