最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JS手机触摸屏的事件用法详解
时间:2013-11-18 编辑:简简单单 来源:一聚教程网
处理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节点坐标。
例
代码如下 | 复制代码 |
二、手势事件:
gesturestart: 当一个手指按在屏幕上,另一个手指有触发屏幕时,触发;
gestureend: 当你的任何一个手指从屏幕上移开的时候,触发;
gesturechange: 当触摸屏幕的任何一个手指发生变化的时候,触发;
在事件对象这里,其他的都还一样,在手势这里多了两个很有用的东西:
一个是rotation: 手指变化引起的旋转角度,顺时针为正的,逆时针为负的;
还有一个scale: 两个手指之间的距离变化;
例
代码如下 | 复制代码 |
|
现在jquery提供了一个非常不错的jquery手机插件,就是jquery mobile了,使用它就可以很方便哦。
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31