手机上的触摸事件

来源:http://www.2cto.com/kf/201401/272575.html

一、手机上的触摸事件

基本事件:

touchstart   //手指刚接触屏幕时触发

touchmove    //手指在屏幕上移动时触发

touchend     //手指从屏幕上移开时触发

下面这个比较少用:

touchcancel  //触摸过程被系统取消时触发

每个事件都有以下列表,比如touchend的targetTouches当然是 0 咯:

touches         //位于屏幕上的所有手指的列表

targetTouches   //位于该元素上的所有手指的列表

changedTouches  //涉及当前事件的所有手指的列表

每个事件有列表,每个列表还有以下属性:

复制代码

其中坐标常用pageX,pageY:

pageX    //相对于页面的 X 坐标

pageY    //相对于页面的 Y 坐标

clientX  //相对于视区的 X 坐标

clientY  //相对于视区的 Y 坐标

screenX  //相对于屏幕的 X 坐标

screenY  //相对于屏幕的 Y 坐标

identifier // 当前触摸点的惟一编号

target   //手指所触摸的 DOM 元素

复制代码

其他相关事件:

event.preventDefault()   //阻止触摸时浏览器的缩放、滚动条滚动

var supportTouch = "createTouch" in document  //判断是否支持触摸事件

更多深入内容?点击:http://www.cesclub.com/bw/jishuzhongxin/Webjishu/2011/1216/18069.html

二、示例

以下是获取不同类型滑动的代码具体做法,结合前人的思想,封装好了,可以借鉴学习:

复制代码

var touchFunc = function(obj,type,func) {

//滑动范围在5x5内则做点击处理,s是开始,e是结束

var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};

var sTime = 0, eTime = 0;

type = type.toLowerCase();

obj.addEventListener("touchstart",function(){

sTime = new Date().getTime();

init.sx = event.targetTouches[0].pageX;

init.sy = event.targetTouches[0].pageY;

init.ex = init.sx;

init.ey = init.sy;

if(type.indexOf("start") != -1) func();

}, false);

obj.addEventListener("touchmove",function() {

event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动

init.ex = event.targetTouches[0].pageX;

init.ey = event.targetTouches[0].pageY;

if(type.indexOf("move")!=-1) 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 > 0) {

if(type.indexOf("left")!=-1) func();

}else{

if(type.indexOf("right")!=-1) func();

}

}

else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){

//上下事件

if(changeY > 0) {

if(type.indexOf("top")!=-1) func();

}else{

if(type.indexOf("down")!=-1) func();

}

}

else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){

eTime = new Date().getTime();

//点击事件,此处根据时间差细分下

if((eTime - sTime) > 300) {

if(type.indexOf("long")!=-1) func(); //长按

}

else {

if(type.indexOf("click")!=-1) func(); //当点击处理

}

}

if(type.indexOf("end")!=-1) func();

}, false);

};

时间: 2024-09-29 10:53:01

手机上的触摸事件的相关文章

关于windows phone 8.1系统手机对html5触摸事件的支持情况

近日购入一部微软Lumia 640手机,目的主要就是为了测试年中开发完成的响应式移动web项目,同时也为了将来升级win10 mobile系统.由于我们的项目目前只考虑支持IOS与Android系统,所以只支持了html5触摸事件(如touchstart). 印象中WP系统应该只支持MS开头(如MSPointerDown)的指针事件,但测试结果很出人意料:项目在WP8.1的Lumia 640手机上竟完全可以正常运行,并支持了所有的触摸事件... 对于这个问题我挺不解的,于是就查阅了下msdn文档

移动端JS 触摸事件基础

一.手机上的触摸事件 基本事件: touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指从屏幕上移开时触发 下面这个比较少用: touchcancel  //触摸过程被系统取消时触发 每个事件都有以下列表,比如touchend的targetTouches当然是 0 咯: touches         //位于屏幕上的所有手指的列表 targetTouches   //位于该元素上的所有手指的列表 change

移动端js触摸事件大全

一.手机上的触摸事件 基本事件: touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指从屏幕上移开时触发 下面这个比较少用: touchcancel  //触摸过程被系统取消时触发 每个事件都有以下列表,比如touchend的targetTouches当然是 0 咯: touches         //位于屏幕上的所有手指的列表 targetTouches   //位于该元素上的所有手指的列表 change

关于iphone上点击事件无效

事情缘由 由于工作需要,我自己写了一个modal弹出框,弹出框显示的时候,点击屏幕则该框消失. 然后我利用jQuery的on方法把click事件绑定到了document上面.做完之后,效果不错,结果就上线了. 结果同事拿着他的iphone6告诉我,弹出框无法消失. 然后我就找啊找,debug发现该事件没有执行,然后我就换了个写法,直接使用click方法能用. 查找原因 我们都知道在移动端,手机默认是触摸事件,也就是touch事件.在iphone上面事件冒泡的是touch一类的事件,而不是clic

iOS开发笔记--iOS中的触摸事件和手势处理

iOS中的事件可以分为三大类:原文:http://my.oschina.net/aofe/blog/268749 1> 触摸事件 2> 加速计事件 3> 远程控制事件 响应者对象 在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件.我们称之为"响应者对象". UIApplication,UIViewController,UIView都继承自UIResponder,因此它们都是响应者对象,都能够接收并处理事件. UIRespon

触摸事件,手势识别

•在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件.我们称之为“响应者对象” • •UIApplication.UIViewController.UIView都继承自UIResponder,因此它们都是响应者对象,都能够接收并处理事件 •UIResponder内部提供了以下方法来处理事件 Ø触摸事件 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event; - (void)tou

iOS中的触摸事件

1.响应者对象 iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件,我们称之为“响应者对象”. UIApplication.UIViewController.UIView都继承自UIResponder,因此他们都是响应者对象,都能够接收并处理事件. 2.UIResponde UIResponder内部提供了以下方法来处理事件 触摸事件: - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)e

触摸事件基本介绍

iOS中的事件 响应者对象 ● 在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事 件.我们称之为“响应者对象” ● UIApplication.UIViewController.UIView都继承?自UIResponder,因此它们都 是响应者对象,都能够接收并处理事件 UIResponder ● UIResponder内部提供了以下?方法来处理事件 ? 触摸事件 - (void)touchesBegan:(NSSet *)touches withEve

猫猫学IOS(二十五)UI之触摸事件

猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243?viewmode=contents iOS中的事件 在用户使用app过程中,会产生各种各样的事件;iOS中的事件可以分为3大类型: 响应者对象–UIResponder 在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件.我们称之为"响应者对象" UIApplication.UIViewController.UI