手机触屏的js事件
我们来看几个关键的地方:
changedTouches/touches/targetTouches
touches:为屏幕上所有手指的信息
PS:因为手机屏幕支持多点触屏,所以这里的参数就与手机有所不同
targetTouches:手指在目标区域的手指信息
changedTouches:最近一次触发该事件的手指信息
比如两个手指同时触发事件,2个手指都在区域内,则容量为2,如果是先后离开的的话,就会先触发一次再触发一次,这里的length就是1,只统计最新的
PS:一般changedTouches的length都是1
touchend时,touches与targetTouches信息会被删除,changedTouches保存的最后一次的信息,最好用于计算手指信息
这里要使用哪个数据各位自己看着办吧,我也不是十分清晰(我这里还是使用changedTouches吧)
var touchFunc = function(obj,type,func) {
//滑动范围在5x5内则做点击处理,s是开始,e是结束
var init = {x:,y:,sx:,sy:,ex:,ey:};
var sTime = , eTime = ;
type = type.toLowerCase(); obj.addEventListener("touchstart",function(){
sTime = new Date().getTime();
init.sx = event.targetTouches[].pageX;
init.sy = event.targetTouches[].pageY;
init.ex = init.sx;
init.ey = init.sy;
if(type.indexOf("start") != -) func();
}, false); obj.addEventListener("touchmove",function() {
event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动
init.ex = event.targetTouches[].pageX;
init.ey = event.targetTouches[].pageY;
if(type.indexOf("move")!=-) func();
}, false); obj.addEventListener("touchend",function() {
var changeX = init.sx - init.ex;
var changeY = init.sy - init.ey;
if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) {
//左右事件
if(changeX > ) {
if(type.indexOf("left")!=-) func();
}else{
if(type.indexOf("right")!=-) func();
}
}
else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){
//上下事件
if(changeY > ) {
if(type.indexOf("top")!=-) func();
}else{
if(type.indexOf("down")!=-) func();
}
}
else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){
eTime = new Date().getTime();
//点击事件,此处根据时间差细分下
if((eTime - sTime) > ) {
if(type.indexOf("long")!=-) func(); //长按
}
else {
if(type.indexOf("click")!=-) func(); //当点击处理
}
}
if(type.indexOf("end")!=-) func();
}, false);
};
完整的触控事件
//捕获手势事件(与捕捉鼠标事件是一样的,只需要添加一个监听器就好了)====添加一个事件监听addEventListener
/**
*在document下面监听touchstart和touchend这两个事件
*touches[]是一个数组,多点触控,此处只需要在2048中采用单点触控即可
*
*/
var startx=,starty=,endx = ,endy = ;
document.addEventListener('touchstart',function(event){
startx = event.touches[].pageX;//获取屏幕X的位置;
starty = event.touches[].pageY;
});
document.addEventListener('touchmove',function(event){
event.preventDefault();//阻止触摸时浏览器的缩放,滚动条滚动
});
document.addEventListener('touchend',function(event){
endx = event.changedTouches[].pageX;
endy = event.changedTouches[].pageY; //声明两个变量来保存向量
var subx = endx-startx;
var suby = endy-starty;
if (Math.abs(subx)<0.3*documentWidth && Math.abs(suby)<0.3*documentWidth) {
return;//处理小范围滑动,不操作,即容错处理
};
//触控事件的逻辑===上滑,下滑,左滑,右滑;
/*
*注意:在移动手机端中,纵坐标向下为正。
*/
if (Math.abs(subx)>=Math.abs(suby)) {
//横坐标移动范围比纵坐标移动范围广
if (subx>) {
//右滑
if (moveRight()) {
setTimeout("generateOneNumber()",);
setTimeout("isgameover()",);
};
} else{
//左滑
if (moveLeft()) {
setTimeout("generateOneNumber()",);
setTimeout("isgameover()",);
};
};
} else{//纵坐标移动范围比横坐标移动范围广
if (suby>) {
//下滑
if (moveDown()) {
setTimeout("generateOneNumber()",);
setTimeout("isgameover()",);
};
} else{
//上滑
if (moveUp()) {
setTimeout("generateOneNumber()",);
setTimeout("isgameover()",);
};
};
}; });
手机触屏的js事件的更多相关文章
- 移动终端学习2:触屏原生js事件及重力感应
如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增 ...
- HTML5学习总结-09 拖放和手机触屏事件
一 拖放 拖放(Drag 和 drop)是 HTML5 标准的组成部分.拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 课程参考 ht ...
- 手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- jQuery手机触屏拖动滑块验证跳转插件
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...
- 触屏Tap模拟事件
触屏的click因为有双击判断所以有200ms的延迟,zepto里的touch.js兼容不好所以tap也没法直接用. gibhub上有个fastclick太大了. 自己用touched写个简单的模拟t ...
- jquery -- 触屏设备touch事件
几种普及得比较好的触摸事件,你可以在绝大多数现代浏览器中来测试这一事件(必须是触屏设备哦): touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend ...
- 手机触屏触摸特效javascript-TouchSwipe(依赖于jquery库)中文说明
by 郑州seo on 2013 年 7 月 6 日 in jquery, 网站建设 with 6 Comments 最近需要做一个手机小门户网站,因为目前主流的手机都是安卓和苹果的,他们的浏览器内核 ...
- 贪吃蛇大作战canvas实现(手机触屏操作)--地图逻辑
//html部分 <!DOCTYPE html><html><head lang="en"> <meta charset="UT ...
- jquery手机触屏滑动拼音字母城市选择器代码
今天用到城市选择,直接用拼音滑动方式来选择,用的时候引入jquery(个别样式需要自己修改) <div class="yp_indz"><img src=&quo ...
随机推荐
- iOS设计模式解析(二)抽象工厂方法
抽象工厂方法:提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类 与工厂方法区别: 抽象工厂通过对象组合创建抽象产品.工厂通过类集成创建抽象产品 抽象工厂创建多系列产品.工厂创建一种产 ...
- JQuery Ajax Options
参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ("POST" 或 ...
- 在eclipse上提交任务到集群执行
win7下eclipse远程开发hadoop程序,分为两种: (1)运行[Run As] Java Application, 打包程序为jar,上传集群执行(这里不做解释) (2)运行[Run As] ...
- TCP/IP详解之:UDP协议
第11章 UDP协议 UDP首部 UDP的检验和是可选的,而TCP的检验和是必须的: UDP的检验和是端到端的检验和.由发送端计算,由接收端验证: 尽管UDP的检验和是可选的,但总是推荐被使用 IP ...
- Django模板-模板标签
接着Django模板-基础知识继续写模板相关知识. if标签 {% if %} 标签接受 and , or 或者 not 关键字来对多个变量做判断 ,或者对变量取反( not ). 但是不允许在同一个 ...
- mongo设计(三)
原文:http://blog.mongodb.org/post/88473035333/6-rules-of-thumb-for-mongodb-schema-design-part-3 By Wil ...
- Three-Color Flag
问题陈述: 三色旗的问题最早由E.W.Dijkstra所提出,他所使用的用语为Dutch Nation Flag(Dijkstra为荷兰人),而多数的作者则使用Three-Color Flag来称之. ...
- Oracle EBS-SQL (WIP-8):检查期间任务下达记录数.sql
select WE.DESCRIPTION 任 ...
- Linux内核源代码解析——用户发送数据包的起源之sendto
本文原创为freas_1990,转载请标明出处:http://blog.csdn.net/freas_1990/article/details/10162853 Jack:我想知道用户如何把数据发送到 ...
- React系列(一):React入门
React简介 1.由来 React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题. 2.React的优势 解决大规模项目开发中数据 ...