js 处理移动端触摸事件
在处理移动端的touch事件时,我们可以选择一些插件来处理,比如jquery ui touch punch.js 提供丰富的触摸效果,可以满足移动端的开发,
但是,有些移动端开发中,并不需要如此复杂的效果,例如我们只需知道滑动的距离,向左还是向右,我们可以自己写一些代码来处理touch事件;
以下代码,只在触摸情况下支持,电脑需要chrome模拟手机;
可以改造成自己需要的效果:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>touches</title>
<style>
body{ font-size:16px; color:red;}
#div1{width:100%;height:200px;background:#ccc;font-size:2em;}
</style>
<script>
var xc,yc,x1,x2,y1,y2;
function touches(ev){
if(ev.touches.length==1){ var oDiv=document.getElementById('div1'); switch(ev.type){
case 'touchstart':
//oDiv.innerHTML='Touch start('+ev.touches[0].clientX+', '+ev.touches[0].clientY+')';
ev.preventDefault(); //阻止出现滚动条 x1 = Math.floor(ev.touches[0].clientX);
y1 = Math.floor(ev.touches[0].clientY);
break;
case 'touchend':
//oDiv.innerHTML='Touch end('+ev.changedTouches[0].clientX+', '+ev.changedTouches[0].clientY+')';
break; case 'touchmove':
//oDiv.innerHTML='Touch move('+ev.changedTouches[0].clientX+', '+ev.changedTouches[0].clientY+')'; x2 = Math.floor(ev.changedTouches[0].clientX);
y2 = Math.floor(ev.changedTouches[0].clientY);
xc = x2-x1;
yc = y2-y1;
oDiv.innerHTML='x移动了:'+xc+';y移动了'+yc;
break;
} }
}
document.addEventListener('touchstart',touches,false);
document.addEventListener('touchend',touches,false);
document.addEventListener('touchmove',touches,false);
</script> </head>
<body>
<div id="div1"></div>
<p>需要电脑模拟手机(chrome)</p>
</body>
</html>
另外,网上找了一些其他关于处理touch的事件教程:链接如下移动端touch事件
js 处理移动端触摸事件的更多相关文章
- HTML5移动端触摸事件
一.移动端事件问题 1.click事件300ms延迟问题 2007年第一代iphone发布,移动端Safari首创双击缩放功能,原理是click一次后,经过300ms之后检测是否再有一次click,如 ...
- js获取移动端触摸坐标
想在touchmove事件里监听手指按下的坐标,event.pageX获取的是undefined,changedTouches,targetTouches,touches也只获得到了鼠标按下时的坐标, ...
- JS封装移动端触摸滑动插件应用于导航banner【精装版】
自己封装了一个小插件,一个小尝试. 可用于类似于京东导航等效果,效果多样化,很方便. 欢迎大家提点意见. mrChenSwiper( {parent, child, type, parentN, c ...
- 移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel
1.Touch事件简介 pc上的web页面鼠 标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 ipho ...
- 移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel[转]
转:http://www.cnblogs.com/irelands/p/3433628.html 1.Touch事件简介pc上的web页面鼠 标会产生onmousedown.onmouseup.onm ...
- H5移动端触摸事件:touchstart、touchend、touchmove
第一部分代码事例: <html><head> <meta charset="utf-8"> <style> #main,#main1 ...
- 移动端触摸(touch)事件
移动端时代已经到来,作为前端开发的我们没有理由也不应该坐井观天,而是勇敢地跳出心里的那口井,去拥抱蔚蓝的天空.该来的总会来,我们要做的就是接受未知的挑战.正如你所看到的,这是一篇关于移动端触摸事件的文 ...
- 关于js-binding中Layer触摸事件的优化
关于js-binding中Layer触摸事件的优化 cocos2d-x 3.7 1. 目前js中监听触摸事件带来的不便(特别是cocosbuilder) 在目前的js-binding中,如果要监听la ...
- 移动端click事件300ms延迟
移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...
随机推荐
- java多线程之happens-before
1.背景问题 在讲happens-before之前,先引入一个例子: 假定我们有已经被初始化的变量: int counter = 0; 这个 counter 变量被两个线程所共有,也就是说线程A和线程 ...
- IIS7设置默认页
一般用ASP.NET创建的网站默认页都是Default.aspx,不需要设置. 但是如果有网站的起始页不是Default.aspx,就需要在IIS里设置了. IIS7的设置方法和IIS6的不一样: 在 ...
- Linq系列(7)——表达式树之ExpressionVisitor
大家好,由于今天项目升级,大家都在获最新代码,所以我又有时间在这里写点东西,跟大家分享. 在上一篇的文章中我介绍了一个dll,使大家在debug的时候可以可视化的看到ExpressionTree的Bo ...
- 第4章 URL管理器和实现方法
URL管理器:管理待抓取URL集合和已抓取URL集合 -- 防止重复抓取.防止循环抓取 URL需要支持哪些功能: 添加新URL到待爬取集合中.判断待添加URL是否在容器中,判断是否还有待爬取URL,获 ...
- 百度地图SnapshotReadyCallback截屏
今天碰到了地图截图的功能,不太会,查查资料知道怎么弄了,跟大家分享一下 直接上代码,弄了一个方法,将截取的图片上传至服务器,返回给我们图片路径 //获取地图截图 private void getscr ...
- uitableview滚动到最后一行
本文转载至 http://mrjeye.iteye.com/blog/1278521 - (void)scrollTableToFoot:(BOOL)animated { NSInteger s = ...
- 服务器buff管理
关于buff和玩家自动回血buff { m_StatusTimer.reset(pFT->createTimer()); m_StatusTimer->setInterval(); m_S ...
- debian dhcp配置
1 将/etc/network/interfaces中设置成dhcp auto eth0iface eth0 inet dhcp 2 重启网络服务 /etc/init.d/networking res ...
- spring AOP理解和相关术语
一.AOP理解 AOP:横向抽取机制,底层使用代理方式实现. 示例: 现有LogDAO接口以及实现Log接口的Log类.类有add的方法,现在要打印add方法的开始时间和结束时间.(即增强Log的ad ...
- GTK+重拾--07 GTK+中的事件
(一):写在前面 在这一个小节中,我们主要是学习GTK+2.0中最重要的部分.就是信号和事件.GTK+函数工具库是基于"事件"系统的.全部的GUI应用都是基于"事件&qu ...