这篇文章主要为大家详细介绍了移动端 js 触摸事件, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
原文标题:Developing for Multi-Touch web Browsers
一、手机上的触摸事件
基本事件:
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 // 判断是否支持触摸事件
二、示例
以下是获取不同类型滑动的代码具体做法,结合前人的思想,封装好了,可以借鉴学习:
- 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);
- };
转载的文章:手机触摸屏的 JS 事件
处理 Touch 事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种 Touch 事件:
1.touchstart: // 手指放到屏幕上的时候触发 2.touchmove: // 手指在屏幕上移动的时候触发 3.touchend: // 手指从屏幕上拿起的时候触发 4touchcancel: // 系统取消 touch 事件的时候触发。至于系统什么时候会取消,不详
属性
1.client / clientY:// 触摸点相对于浏览器窗口 viewport 的位置 2.pageX / pageY:// 触摸点相对于页面的位置 3.screenX /screenY:// 触摸点相对于屏幕的位置 4.identifier: // touch 对象的 unique ID
- //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) {
- //上下滑动
- }
- }
转载的第二篇文章:Mobile Web 前端开发系列: 事件处理(二)
上篇文章我们讲了 html 的基本事件,这篇文章我们着重讲解下触摸事件,触摸事件触发的条件是手指接触屏幕、手指在屏幕上移动或者从屏幕上离开。 事件是触摸的集合,它起始于手指初次放置在屏幕上,终止于最后一个手指离开屏幕。事件从开始到结束过程中的所有触摸操作都存储在相同事件的记录中。
touch 事件
touch 事件可以分为单点触摸和多点触摸两种,单点触摸高端机一般都支持,Safari2.0、Android3.0 以上的版本支持多点触摸,支持最多 5 个手指同时触摸屏幕,ipad 最多支持 11 个手指同时触摸屏幕, 我们可以采用以下的事件模型捕获这些事件: ontouchstart ontouchmove ontouchend ontouchcancel
当用户按下手指在屏幕上,ontouchstart 会被触发,当用户移动一个或多个手指的时候,ontouchmove 会被触发,当用户移走手指, ontouchend 被触发。那什么时候触发 ontouchcancel 呢?当一些更高级别的事件发生的时候,例如,alert,有电话打来或者有 推送的消息提示的时候会取消当前的 touch 操作,即触发 ontouchcancel。当你在开发一个 web game 的时候,ontouchcancel 对你很重要,你可以在 ontouchcancel 触发的时候暂停游戏或者保存游戏。
gesture 事件
gesture 事件的运行原理与 touch 事件相同,只是 gesture 事件仅当屏幕上存在至少两个手指时触发,所以 Safari2.0、Android3.0 以上版本支持, 手势具备诸多优势,可以帮助我们测量两指放缩和旋转操作,事件模型如下: ongesturestart ongesturechange ongestureend
事件属性
无论使用触摸还是手势事件,你都需要将这些事件转换为单独的触摸来使用它们。为此,你需要访问事件对象的一系列的属性。
targetTouches 目标元素的所有当前触摸 changedTouches 页面上最新更改的所有触摸 touches 页面上的所有触摸
changedTouches、targetTouches 和 touches 分别包含稍微不同的触摸列表。targetTouches 和 touches 分别包含当前位于 屏幕上的手指列表,但 changedTouches 仅列出最后发生的触摸。如果你在使用 touchend 或者 gestureend 事件,那么这个属性 非常重要。在这两种情况下,屏幕上都不会再出现手指,因此 targetTouches 和 touches 应该为空,但你仍然可以通过查看 changedTouches 数组来了解最后发生的事情。
由于触摸属性都会生成数组,因此你可以使用 JavaScript 数组函数来访问它们。这意味着,event.touches[0] 将返回第一次 触摸,并且可以使用 event.touches.length 来计算当前存储的触摸数量。
查看单独触摸时,通过使用 event.targetTouches[0], 你也可以访问其它触摸,每个触摸会包含一些具体信息,
clientX、clientY 相对于当前屏幕的 X 或 Y 位置 pageX、pageY 相对于整体页面的 X 或 Y 位置 screenX、screenY 相对于用户计算机屏幕的 X 或 Y 位置 identifier 事件的唯一标识符 target 生成触摸的目标对象
手势事件的事件对象会比普通触摸事件多两个属性,rotation 手指的旋转角度 scale 放缩的值
转载文章:JavaScript 触摸与手势事件
iOS 版 Safari 为了向开发人员传达一些特殊信息,新增了一些专有事件。因为 iOS 设备既没有鼠标也没有键盘,所以在为移动 Safari 开发交互网页时,常规的鼠标和键盘事件根本不够用。随着 Android 中的 WebKit 的加入,很多这样的专有事件变成了事实标准。
1. 触摸事件
包含 iOS2.0 软件的 iPhone 3G 发布时,也包含了一个新版本的 Safari 浏览器。这款新的移动 Safari 提供了一些与触摸 (touch) 操作相关的新事件。后来, Android 上的浏览器也实现了相同的事件。触摸事件会在用户手指放在屏幕上面时、在屏幕上滑动时或从屏幕上移开时触发。具体来说,有以下几个触摸事件。
touchstart: 当手指触摸屏幕时触发;即使已经有一个手指放在了屏幕上也会触发。 touchmove: 当手指在屏幕上滑动时连续的触发。在这个事件发生期间,调用 preventDefault() 可阻止滚动。 touchend: 当手指从屏幕上移开时触发。 touchcancel: 当系统停止跟踪触摸时触发。关于此事件的确切触发事件,文档中没有明确说明。
上面这几个事件都会冒泡,也都可以取消。虽然这些触摸事件没有在 DOM 规范中定义,但它们却是以兼容 DOM 的方式实现的。因此,每个触摸事件没有在 DOM 规范中定义,但它们却是以兼容 DOM 的方式实现的。因此,每个触摸事件的 event 对象都提供了在鼠标事件中常见的属性: bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey 和 metaKey。
除了常见的 DOM 属性外,触摸事件还包含下列三个用于跟踪触摸的属性。 touches: 表示当前跟踪的触摸操作的 Touch 对象的数组。 targetTouches: 特定于事件目标的 Touch 对象的数组。 changeTouches: 表示自上次触摸以来发生了什么改变的 Touch 对象的数组。
每个 Touch 对象包含下列属性。 clientX: 触摸目标在视口中的 X 坐标。 clientY: 触摸目标在视口中的 Y 坐标。 identifier:表示触摸的唯一 ID。 pageX:触摸目标在页面中的 x 坐标。 pageY:触摸目标在页面中的 y 坐标。 screenX: 触摸目标在屏幕中的 x 坐标。 screenY: 触摸目标在屏幕中的 y 坐标。 target: 触摸的 DOM 节点坐标。
使用这些属性可以跟踪用户对屏幕触摸操作。来看下面的例子。
- function handleTouchEvent(event) {
- //只跟踪一次触摸
- if (event.touches.length == 1) {
- var output = document.getElementById("output");
- switch (event.type) {
- case "touchstart":
- output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
- break;
- case "touchend":
- output.innerHTML += "<br>Touch ended (" + event.changedTouches[0].clientX + "," + event.changeTouches[0].clientY + ")";
- break;
- case "touchmove":
- event.preventDefault(); //阻止滚动
- output.innerHTML += "<br>Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
- break;
- }
- }
- }
- document.addEventListener("touchstart", handleTouchEvent, false);
- document.addEventListener("touchend", handleTouchEvent, false);
- document.addEventListener("touchmove", handleTouchEvent, false);
以上代码会跟踪屏幕上发生的一次触摸操作。为简单起见,只会在有一次活动触摸操作的情况下输出信息。当 touchstart 事件发生时。会将触摸的位置信息输出到
元素中。当 touchmove 事件发生时,会取消其默认行为,阻止滚动(触摸移动的默认行为是滚动页面),然后输出触摸操作的变化信息。而 touched 事件则会输出有关触摸操作的最终信息。注意,在 touched 事件发生时,touched 集合中就没有任何 Touch 对象了,因为不存在活动的触摸操作; 此时,就必须转而使用 changeTouchs 集合。
这些事件会在文档的所有元素上面触发,因而可以分别操作页面的不同部分。在触摸屏幕上的元素时,这些事件发生的数序如下: touchstart mouseover mousemove mousedown mouseup click touchend
支持触摸事件的浏览器包括 iOS 版 Safari、Android 版 WebKit、beta 版 Dolfin、OS6 + 中的 BlackBerry WebKit、Opera Mobile 10.1 和 LG 专有 OS 中的 phantom 浏览器。目前只有 IOS 版 Safari 支持多点触屏。桌面版 Firefox 6 + 和 Chrome 也支持触摸事件。
2. 手势事件
IOS 2.0 中的 Safari 还引入了一组手势事件。当两个手指触摸屏幕时就会产生手势,手势通常会改变显示项的大小,或者旋转显示项。有三个手势事件,分别如下。 gesturestart: 当一个手指已经按在屏幕上面另一个手指有触摸屏幕时触发。 gesturechange: 当触摸屏幕的任何一个手指的位置发生变化时触发。 gestureend: 当任何一个手指从屏幕上面移开时触发。
只有两个手指都触摸到事件的接收容器时才会触发这些事件。在一个元素上设置事件处理程序,意味着两个手指必须同时位于该元素的范围之内,才能触发手势事件(这个元素就是目标)。由于这些事件冒泡,所以将事件处理程序放在文档上也可以处理所有手势事件。此时,事件的目标就是两个手指都位于其范围内的那个元素。
触摸事件和手势事件之间存在某种关系。当一个手指放在屏幕上时,会触发 touchstart 事件。如果另一个手指又放在了屏幕上,则会先触发 gesturestart 事件。如果另一个手指又放在了屏幕上,则会先触发 gesturestart 事件,随后触发基于该手指的 touchstart 事件。如果一个或两个手指在屏幕上滑动,将会触发 gesturechange 事件,但只要有一个手指移开,就会触发 gestureend 事件,紧接着又会触发基于该手指的 touchend 事件。
与触摸事件一样,每个手势事件的 event 对象都包含着标准的鼠标事件属性:bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey 和 metaKey。此外,还包含两个额外的属性:rotation 和 scale。其中, rotation 属性表示手指变化引起的旋转角度,负值表示逆时针旋转,正值表示顺时针旋转(该值从 0 开始)。而 scale 属性表示两个手指间距的变化情况(例如向内收缩会缩短距离); 这个值从 1 开始,并随距离拉大而增长,随距离缩减而减小。
下面是使用手势事件的一个示例:
- function handleGestureEvent(event) {
- var output = document.getElementById("output");
- switch(event.type) {
- case "gesturestart":
- output.innerHTML = "Gesture started (rotation=" + event.ratation +",scale=" + event.scale + ")";
- break;
- case "gestureend":
- output.innerHTML += "<br>Gesture ended (rotation+" + event.rotation + ",scale=" + event.scale + ")";
- break;
- case "gesturechange":
- output.innerHTML += "<br>Gesture changed (rotation+=" + event.rotation + ",scale+" + event.scale + ")";
- break;
- }
- }
- document.addEventListener("gesturestart", handleGestureEvent, false);
- document.addEventListener("gestureend", handleGestureEvent, false);
- document.addEventListener("gesturechange", handleGestureEvent, false);
与前面演示触摸事件的例子一样,这里的代码只是将每个事件都关联到同一个函数中,然后通过该函数输出每个事件的相关信息。
来源: http://www.phperz.com/article/17/0530/331789.html