以下经过本人测试成功。

测试平台：三星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. Windows phone 之Image控件

    wp目前支持的图片格式为png和jpeg ,我们可以通过设置Source属性设置图片源. 还有两个属性是:Stretch,Opacity Stretch属性 image的拉伸行为有此属性决定,此属性是 ...

  2. 使用awstats统计分析tengine日志访问量及各种http网站数据

    下载awstats最新安装包并解压 cd /usr/local/src wget http://www.awstats.org/files/awstats-7.3.tar.gz tar -zxvf a ...

  3. 安装windows操作系统

    我认为windows安装有两种源文件,一种是ghost(.gho),一种是安装包(setup.exe). ghost安装是把将一个硬盘中的数据(.gho)完全相同地恢复到系统硬盘中.优点是速度快,而且 ...

  4. Xcode7之后常见问题整理－b

    一.Xcode7,iOS9之后传出来的什么Xcode有鬼,被植入代码片段什么的,可以看看,了解一下http://drops.wooyun.org/news/8864 二.bitcode问题--未正确设 ...

  5. Keras如何构造简单的CNN网络

    1. 导入各种模块 基本形式为: import 模块名 from 某个文件 import 某个模块 2. 导入数据(以两类分类问题为例,即numClass = 2) 训练集数据data 可以看到,da ...

  6. jQuery.Deferred对象

    一.前言 jQuery1.5之前,如果需要多次Ajax操作,我们一般会使用下面的两种方式: 1).串行调用Ajax $.ajax({ success: function() { $.ajax({ su ...

  7. Thrift 使用方法

  8. Stanford Parser学习入门(1)-Eclipse中配置

    Stanford Parser是斯坦福大学研发的用于语法分析的工具,属于stanford nlp系列工具之一.本文主要介绍Standfor Parser的入门用法. 在Stanford官方网站下载最新 ...

  9. VC++6.0 编写插件（图文并茂）

    下午偶然注意到VC++6.0新建工程标签页下的DevStudio Add-in Wizard,没有接触过,看名字是给Developer Studio开发插件,心生喜感,于是百度之,发生百度检索几乎找不 ...

  10. mysql 服务意外停止1067错误解决办法小结

    今天在配置服务器时安装mysql5.5总是无法安装,查看日志错误提示为1067错误,下面来看我的解决办法 事件类型: 错误 事件来源: Service Control Manager 事件种类: 无  ...