touch触摸事件（前端的touch事件有哪些呢）

本文目录

• 前端的touch事件有哪些呢
• 移动端touch事件和click事件的区别
• html5 touch 触摸事件如何监听一个手指多次来回摩擦触发事件
• touch事件中的touches、targetTouches和changedTouches详解
• 移动端触摸事件有哪些
• 移动端touch触屏滑动事件、滑动触屏事件监听！
• JavaScript怎样对事件进行分类

前端的touch事件有哪些呢

// 手指在Body中点击时的记录var startX, startY;$("body").on("touchstart", function(e) { startX = e.originalEvent.changedTouches.pageY; // 记录 最初点击时第一个触摸点的y坐标});// 阻止touchmove时的body默认事件$(’body’).on(’touchmove’, function(e) { e.preventDefault();});// 记录/操作 当手指离开的操作 $(’body’)在操作的时候换成具体的选择器如$(’#box’)$("body").on("touchend", function(e) { var moveEndX = e.originalEvent.changedTouches.pageY; // 手指离开时的y坐标 var X = moveEndX - startX; // 离开时的x坐标 - 开始触摸的x坐标 = 横向偏移值 var Y = moveEndY - startY; // 离开时的y坐标 - 开始触摸的y坐标 = 纵向偏移值 if ( Math.abs(X) 》 Math.abs(Y) && X 》 0 ) { // 从左到右 alert("left 2 right");} else if ( Math.abs(X) 》 Math.abs(Y) && X 《 0 ) { // 从右到左 alert("right 2 left");} else if ( Math.abs(Y) 》 Math.abs(X) && Y 》 0) { // 从上到下 alert("top 2 bottom");} else if ( Math.abs(Y) 》 Math.abs(X) && Y 《 0 ) { // 从下到上 alert("bottom 2 top");} else{ alert("just touch");}});

移动端touch事件和click事件的区别

移动端的 click 事件会有 300ms 的延迟。因为浏览器需要判断是否存在着双击事件，因此在移动端使用 click 方法很多情况下会在点击之后停顿一会（300ms）才执行相应的函数；而 touch 事件则是移动端典型的触摸事件，一经 touch 立即反应，没有任何延迟，不过要想完全实现 click 效果，需要对 "touchstart / touchmove / touchend" 这三个事件做混合特殊处理，这一方面可根据实际需求决定是开发者自己编写还是使用通用类库。

html5 touch 触摸事件如何监听一个手指多次来回摩擦触发事件

touchstart：触摸开始的时候触发touchmove：手指在屏幕上滑动的时候触发touchend：触摸结束的时候触发而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：touches：当前位于屏幕上的所有手指的列表。targetTouches：位于当前DOM元素上手指的列表。changedTouches：涉及当前事件手指的列表。每个触摸点由包含了如下触摸信息（常用）：identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）target：DOM元素，是动作所针对的目标。

touch事件中的touches、targetTouches和changedTouches详解

touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前(引发)事件的触摸点的列表 通过一个例子来区分一下触摸事件中的这三个属性： touchstart和touchmove使用: e.targetTouches.pageX touchend使用: e.changedTouches.pageX 3.touchmove事件对象的获取 想要在touchmove:function(e,参数一)加一个参数，结果直接使用e.preventDefault()就会 e 报错，处理方法为使用arguments获取event参数 touchmove:function(e,参数一){ 　　var e=arguments 　　e.preventDefault() }

移动端触摸事件有哪些

click事件touch类事件touchstart：手指触摸到屏幕会触发touchmove：当手指在屏幕上移动时，会触发touchend：当手指离开屏幕时，会触发touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件tap类事件tap: 手指碰一下屏幕会触发longTap: 手指长按屏幕会触发singleTap: 手指碰一下屏幕会触发doubleTap: 手指双击屏幕会触发滑动事件swipe：手指在屏幕上滑动时会触发swipeLeft：手指在屏幕上向左滑动时会触发swipeRight：手指在屏幕上向右滑动时会触发swipeUp：手指在屏幕上向上滑动时会触发swipeDown：手指在屏幕上向下滑动时会触发

移动端touch触屏滑动事件、滑动触屏事件监听！

一、触摸事件

ontouchstart、ontouchmove、ontouchend、ontouchcancel

目前移动端浏览器均支持这4个触摸事件，包括IE。由于触屏也支持MouseEvent，因此他们的顺序是需要注意的：touchstart → mouseover → mousemove → mousedown → mouseup → click1

Apple在iOS 2.0中引入了 触摸事件API ，Android正迎头赶上这一事实标准，缩小差距。最近一个W3C工作组正合力制定这一 触摸事件规范 。

二、规范

这里我们介绍几种普及得比较好的触摸事件，你可以在绝大多数现代浏览器中来测试这一事件（必须是触屏设备哦）：

touchstart： 触摸开始的时候触发

touchmove： 手指在屏幕上滑动的时候触发

touchend： 触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：

touches： 当前位于屏幕上的所有手指的列表。

targetTouches： 位于当前DOM元素上手指的列表。

changedTouches： 涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息（常用）：

identifier： 一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）

target： DOM元素，是动作所针对的目标。

pageX / pageX / clientX / clientY/screenX/screenY ： 一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。

radiusX / radiusY/ rotationAngle： 画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持，好在功能不常用，欢迎大家反馈。

有了这些信息，我们就可以依据这些事件信息为用户提供不同的反馈了。

下面，我将为大家展示一个小demo，用touchmove实现的单指拖动:

三、手势事件 手势是指利用多点触控进行旋转、拉伸等操作，例如图片、网页的放大、旋转。需要两个或以上的手指同时触摸时才会触发手势事件。关于缩放我们需要注意的一点 是元素的位置坐标：我们通常使用offsetX、getBoundingClientRect等方法获取元素的位置坐标，但在手机浏览器中页面经常会在使 用中被缩放，那缩放后的元素坐标会改变吗？答案是有所差异。用一个情景来说明这个问题：页面A加载完成后， JavaScript 获 取到该元素在document中的坐标为(100,100)，接着用户放大了页面，此时用JavaScript再次输出元素坐标，依然还是 (100,100)，但该元素在屏幕上的响应区域会根据缩放比例产生偏移。你可以打开那个打砖块游戏demo，等页面完全加载完成后，再放大，此时你会发 现即使手指触摸在“touch here”区域外部，也可以控制到球板，因为区域发生了偏移。除非页面刷新或者恢复缩放，否则偏移量将一直存在。

四、重力感应

重力感应较简单，只需要为body节点添加onorientationchange事件即可。在此事件中由window.orientation属性得到代表当前手机方向的数值。window.orientation的值列表如下： 0：与页面首次加载时的方向一致 -90：相对原始方向顺时针转了90° 180：转了180° 90：逆时针转了90°据我测试，Android2.1尚未支持重力感应。以上即目前的触屏事件，这些事件尚未并入标准，但已被广泛使用。本人Android2.1，未在其他环境下测试。

JavaScript怎样对事件进行分类

JavaScript中的时间分为六大类：鼠标事件、键盘事件、浏览器事件、焦点事件、移动端事件、其他事件。

一、鼠标事件

click 点击事件

dblclick 双击事件

mousedown 鼠标按下事件

mouseup 鼠标抬起事件

mouseover 鼠标进入事件

mouseleave 鼠标离开事件

mousemove 鼠标移动事件

二、键盘事件

keydown 键盘键被按下

keyup 键盘键被松开

keypress 输入

三、浏览器的事件

load 页面中所有资源都被加载完毕的时候

scroll 页面的卷动

四、焦点事件

focus 当一个元素获取到焦点时

blur 当一个元素失去焦点时

五、移动端事件

touchstart 触摸开始事件，会在手指按下的时候触发

touchmove 触摸并移动 ，会在手指按下并移动的时候触发

touchend 触摸结束事件,会在手指离开的时候触发

六、其他事件

animationstart 动画开始时触发

animationed 动画结束时触发

transitioned 过度结束时触发