处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件:

touchstart: // 手指放到屏幕上的时候触发
touchmove: // 手指在屏幕上移动的时候触发
touchend: // 手指从屏幕上拿起的时候触发
touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消,不详

client / clientY:// 触摸点相对于浏览器窗口viewport的位置
pageX / pageY:// 触摸点相对于页面的位置
screenX /screenY:// 触摸点相对于屏幕的位置
identifier: // touch对象的unique ID

每个Touch对象包含下列属性。

clientX:触摸目标在视口中的X坐标。
    clientY:触摸目标在视口中的Y坐标。
    identifier:表示触摸的唯一ID。
    pageX:触摸目标在页面中的x坐标。
    pageY:触摸目标在页面中的y坐标。
    screenX:触摸目标在屏幕中的x坐标。
    screenY:触摸目标在屏幕中的y坐标。
    target:触摸的DOM节点坐标。

 
//touchstart事件  
function touchSatrtFunc(e) {  
    //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
    var touch = e.touches[0]; //获取第一个触点  
    var x = Number(touch.pageX); //页面触点X坐标  
    var y = Number(touch.pageY); //页面触点Y坐标  
    //记录触点初始位置  
    startX = x;  
    startY = y;  
}  
 
//touchmove事件 
function touchMoveFunc(e) {  
    //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) {  
        //左右滑动  
    }  
    if (y - startY != 0) {  
        //上下滑动  
    }  
}  

手机触摸屏的JS事件的更多相关文章

  1. 手机中的js事件

    // 手势事件 touchstart //当手指接触屏幕时触发 touchmove //当已经接触屏幕的手指开始移动后触发 touchend //当手指离开屏幕时触发 touchcancel // 触 ...

  2. 手机触屏的js事件

    处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件:     1.touchstart:  // 手指放到屏幕上的时候触发      2.touchmove:  // ...

  3. 移动终端学习2:触屏原生js事件及重力感应

    如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增 ...

  4. dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  5. 什么是JS事件冒泡?

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...

  6. js事件技巧方法整合

    window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...

  7. js事件浅析

    js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...

  8. js 事件大全

    Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...

  9. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

随机推荐

  1. css架构目标:预测,重用,扩展,维护

    请参看下面链接: CSS架构目标:预测.重用.扩展.维护

  2. nopCommerce 3.3正式发布及新增功能改进

    nopCommerce是一套优秀开源且基于Asp.net MVC的开源商城系统,nopCommerce 3.x经历长时间多个版本重构优化改进,目前已经趋于完善与成熟! nopCommerce 3.3正 ...

  3. [TYVJ] P1006 ISBN

    ISBN 背景 Background NOIP2008年普及组第一题   描述 Description    每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括9位数字.1位识别码和3位 ...

  4. nginx中配置跨域支持功能

    vi /etc/nginx/nginx.conf 加入如下代码 http {  ###start####  add_header Access-Control-Allow-Origin *;  add ...

  5. backboneJS 使用心得(2)view和model事件的多次绑定(转载)

    一,new 一个新的View对象时,最好把,el参数传进去:而不是在view里面操作view的外部节点. 比如: 外部调用 var view=new BankboneView({el,$('body' ...

  6. 【Xamarin挖墙脚系列:开始使用Xamari4.0系列产品开发IOS】

    一直沉默在Xamarin3.0系列版本上,升级到4.0之后,感觉有些变化.还得适应下. 1 build.host  代理消失了,成了SSH客户端登录.所以,Mac设备需要打开运行远程登录. 2 在Wi ...

  7. httrack,webdup,WinHTTrack,WebZip

    怎么下载摄像头游戏jabbo,并使其能离线运行?修改 1.摄像头游戏jabbo:JABBO Ultimatum by LiveMurals Interactive电脑为:windows 7 32位.试 ...

  8. java中return和continue区别

    编程语言大多是想通的,当然java也不例外,下面的在其他编程语言也是相同的道理. return与continue的区别 先看代码哦 class demo2 { public static void m ...

  9. ModelAndView解析

    查看spring的帮助文档得到下面信息: org.springframework.web.servlet Class ModelAndViewjava.lang.Object org.springfr ...

  10. ubuntu如何开启SSH服务

    ubuntu如何开启SSH服务 分类: Linux 运维与操作基础2013-02-24 13:33 2868人阅读 评论(0) 收藏 举报 sshd ubuntu ubuntu默认并没有安装ssh服务 ...