移动设备、手机浏览器Javascript滑动事件代码
以下经过本人测试成功。
测试平台:三星S5830I
操作系统:Android 2.3.6
浏览器:UC浏览器
HTML标准:HTML5
测试了三个事件:touchstart、touchmove 和 touchend,并获取了触摸时触点在页面上的坐标,根据坐标进行了左右滑动、上下滑动判断。
代码如下:
<!-- HTML5 --> <!DOCTYPE html> <html> <head> <title>TouchEvent测试</title> <meta charset="gbk"> </head> <body> <h2>TouchEvent测试</h2> <br /> <div id="version" style="border:2px solid black;background-color:yellow"></div> <br /> <br /> <br /> <br /> <br /> <br /> <div id="result" style="border:2px solid red; color:red;">未触发事件!</div> <div id="test" style="border:2px solid red"> <ul> <li id="li1">测试条目1</li> <li id="li2">测试条目2</li> <li id="li3">测试条目3</li> <li id="li4">测试条目4</li> <li id="li5">测试条目5</li> <li id="li6">测试条目6</li> <li id="li7">测试条目7</li> <li id="li8">测试条目8</li> <li id="li9">测试条目9</li> <li id="li10">测试条目10</li> <li id="li11">测试条目11</li> <li id="li12">测试条目12</li> <li id="li13">测试条目13</li> <li id="li14">测试条目14</li> <li id="li15">测试条目15</li> <li id="li16">测试条目16</li> <li id="li17">测试条目17</li> <li id="li18">测试条目18</li> <li id="li19">测试条目19</li> <li id="li20">测试条目20</li> </ul> </div> <script type="text/javascript"> //全局变量,触摸开始位置 var startX = 0, startY = 0; //touchstart事件 function touchSatrtFunc(evt) { try { //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 var touch = evt.touches[0]; //获取第一个触点 var x = Number(touch.pageX); //页面触点X坐标 var y = Number(touch.pageY); //页面触点Y坐标 //记录触点初始位置 startX = x; startY = y; var text = 'TouchStart事件触发:(' + x + ', ' + y + ')'; document.getElementById("result").innerHTML = text; } catch (e) { alert('touchSatrtFunc:' + e.message); } } //touchmove事件,这个事件无法获取坐标 function touchMoveFunc(evt) { try { //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 var touch = evt.touches[0]; //获取第一个触点 var x = Number(touch.pageX); //页面触点X坐标 var y = Number(touch.pageY); //页面触点Y坐标 var text = 'TouchMove事件触发:(' + x + ', ' + y + ')'; //判断滑动方向 if (x - startX != 0) { text += '<br/>左右滑动'; } if (y - startY != 0) { text += '<br/>上下滑动'; } document.getElementById("result").innerHTML = text; } catch (e) { alert('touchMoveFunc:' + e.message); } } //touchend事件 function touchEndFunc(evt) { try { //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 var text = 'TouchEnd事件触发'; document.getElementById("result").innerHTML = text; } catch (e) { alert('touchEndFunc:' + e.message); } } //绑定事件 function bindEvent() { document.addEventListener('touchstart', touchSatrtFunc, false); document.addEventListener('touchmove', touchMoveFunc, false); document.addEventListener('touchend', touchEndFunc, false); } //判断是否支持触摸事件 function isTouchDevice() { document.getElementById("version").innerHTML = navigator.appVersion; try { document.createEvent("TouchEvent"); alert("支持TouchEvent事件!"); bindEvent(); //绑定事件 } catch (e) { alert("不支持TouchEvent事件!" + e.message); } } window.onload = isTouchDevice; </script> </body> </html>
下面是jQuery Mobile实现上下滑动的方式:
jQuery Mobile左右滑动事件:swipe(水平滑动30px以上时触发)、swipeLeft(向左滑)、swipeRight(向右滑)
jQuery Mobile垂直滑动事件:scrollstart(上下滚动)、scrollend(滚动停止)
jQuery Mobile触摸点击事件:tap(快速触碰)、taphold(触碰并保持750ms以上触发)
<!DOCTYPE html> <html> <head> <title>Ajax测试</title> <meta charset="gbk"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.2.0.min.css"/> <link rel="stylesheet" href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/> <script src="jquery-mobile/jquery-1.8.2.min.js"></script> <script src="jquery-mobile/jquery.mobile-1.2.0.min.js"></script> </head> <body> <div data-role="page" data-theme="b"> <div data-role="header"></div> <div data-role="content"> <script> //scrollstart事件 function scrollstartFunc(evt) { try { var target = $(evt.target); while (target.attr("id") == undefined) { target = target.parent(); } //获取触点目标id属性值 var targetId = target.attr("id"); alert("targetId: " + targetId); } catch (e) { alert('myscrollfunc:' + e.message); } } function myinit() { //绑定上下滑动事件 $("#myul").bind('scrollstart', function () { scrollstartFunc(event); }); } window.onload = myinit; </script> <!-- listview测试 --> <ul id="myul" data-role="listview" data-inset="true"> <li data-role="list-divider">信息列表</li> <li id="li1" data-role="fieldcontain">信息1</li> <li id="li2" data-role="fieldcontain">信息2</li> <li id="li3" data-role="fieldcontain">信息3</li> <li id="li4" data-role="fieldcontain">信息4</li> <li id="li5" data-role="fieldcontain">信息5</li> <li id="li6" data-role="fieldcontain">信息6</li> <li id="li7" data-role="fieldcontain">信息7</li> <li id="li8" data-role="fieldcontain">信息8</li> <li id="li9" data-role="fieldcontain">信息9</li> <li id="li10" data-role="fieldcontain">信息10</li> </ul> </div> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器