注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Aramey

前端开发

 
 
 

日志

 
 
 
 

移动设备、手机浏览器Javascript滑动事件代码(转)  

2013-08-07 16:55:06|  分类: 前端开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

以下经过本人测试成功。

测试平台:三星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>

原文地址:http://blog.csdn.net/zht666/article/details/8621332

  评论这张
 
阅读(15435)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017