js触摸和手势细节

本文共享js触摸和手势事件，供您参考。详情如下
1。触摸事件
When the iPhone 3G, which contains iOS 2 software, also contains a new version of the Safari browser.The new mobile Safari provides some new events related to the touch operation.Later, the browsers on Android also implemented the same event.Touch events are triggered when the user's finger is placed on the screen, sliding on the screen or moving from the screen.Specifically, there are several touch events.
Touchstart：触发时，手指触屏；即使手指一直放在屏幕上，它会触发。

touchmove：当手指滑动屏幕，它不断被触发。在这个事件中，调用preventDefault（）可以防止滚动。

Touchend：触发时，手指从屏幕。

touchcancel：触发时，系统停止跟踪联系。此事件的确切时间触发文档中没有明确说明。

上述的一些事件冒泡，可以取消。虽然这些触摸事件不在DOM定义的，他们是在一个DOM兼容的方式实现的。因此，每一个触摸事件的事件对象提供鼠标事件的共同属性：气泡，可撤销的观点，ClientX，clienty，用ScreenX，Screeny，细节，altkey，大写键，altkey，等等。

除了常见的DOM属性外，触摸事件包含以下三个跟踪触摸的属性。

触摸：一系列触摸对象，用于当前正在跟踪的触摸操作。

TargetTouchs：触摸的对象，具体到事件目标数组。

ChangeTouches：那已经过去了触摸触摸对象数组。
每个触摸对象包含以下属性。

ClientX：X坐标碰在视图的目标。

ClientY：Y坐标触摸在视图的目标。

标识符：标识触摸的惟一id。

PageX：在页面目标点的X坐标。

PageY：点页面中的目标Y坐标。

用ScreenX：触摸屏幕中目标的X坐标。

ScreenY：触摸屏幕中目标的Y坐标。

目标：DOM节点目标的触摸。
这些属性可以用来跟踪用户在屏幕上的触摸。
功能handletouchevent（事件）{
只有一次触摸/跟踪
如果（event.touches.length = = 1）{
无功输出= document.getelementbyid（输出）；
开关（事件类型）{
案例touchstart ：
output.innerhtml =触摸开始（+事件。触动{ 0 }。ClientX +）

打破；
案例touchend ：
output.innerhtml =触摸+结束（
事件。changedtouches { 0 }。ClientX +
事件。changedtouches { 0 }。clienty +）；
打破；
案例touchmove ：
（事件。preventDefault）； / /停止滚动
output.innerhtml =触摸+移动（
事件。changedtouches { 0 }。ClientX +
事件。changedtouches { 0 }。clienty +）；
打破；
}
}
}
EventUtil.addHandler（文档，touchstart
EventUtil.addHandler（文档，touchend
EventUtil.addHandler（文档，touchmove

上面的代码将跟踪屏幕上的触摸操作。为简单起见，只会输出信息的时候，有一个活跃的触摸操作。当touchstart事件发生时，触摸的位置信息是出口的元素。当touchmove事件发生，将取消其默认行为，防止滚动（触摸运动的默认动作是滚动页面），然后输出变化信息的触摸操作，touchend事件将输出的触摸操作的最后信息。注意，当touchend事件发生时，在接触收集没有接触的对象，因为没有主动触摸操作。在这一点上，我们必须切换到changetouchs集。
这些事件被触发在文档的所有元素上，因此页面的不同部分可以单独操作。当屏幕上的元素被触摸时，这些事件的顺序，包括鼠标事件，如下所示：

（1）touchstart

（2）鼠标悬停

（3）MouseMove（一）

（4）鼠标

（5）松开鼠标

（6）单击

（7）touchend

支持触摸事件包括iOS版Safari浏览器，Android版本的WebKit，bada版本道芬，blackberrywebkit在OS6 +，Opera移动10.1 +和浏览器的专有专有的歌剧。
2。手势
iOS 2中的Safari还引入了一组手势。当两个手指触摸屏幕时，手势产生，手势通常改变显示项的大小，或旋转显示项。有三个手势，其描述如下。

Gesturestart：当一个手指被压在屏幕上，其他手指触摸屏幕，这是引发。

Gesturechange：当手指触摸屏幕的任何位置发生变化，这是引发。

Gestureend：当手指从屏幕上移开，这是引发。
这些事件被触发的只有两个手指触摸接收事件的容器，设置事件处理程序的元素就意味着两个手指必须位于该元素的范围，同时，为了触发动作的事件。因为这些事件冒泡，事件处理程序放置在文件和所有的手势事件可以被处理。在这一点上，一个事件的目标是在其范围内的两个手指的元素。
There is a relationship between touch events and gestures.When a finger is placed on the screen, the touchstart event is triggered.If another finger is placed on the screen, the gesturestart event is triggered first, and then the touchstart event based on the finger is triggered.If one or two fingers slide on the screen, the gesturechange event will be triggered.But as long as one finger moves away, the gestureend event is triggered, and then the touchend event based on the finger will be triggered.

像触摸事件，每一个手势事件的事件对象包含标准的鼠标事件属性：气泡，可撤销的观点，ClientX，clienty，用ScreenX，Screeny，细节，altkey，大写键，大写键和细节。此外，有两个附加属性：旋转和尺度。其中，旋转属性代表通过手指的变化引起的的旋转角度，和负价值是逆时针旋转。正值表示顺时针旋转（值从0开始）。比例属性表示两个手指之间距离的变化（例如向内收缩缩短距离）。这个值从1开始，随着距离而增加，随着距离的减小而减小。
下面是手势用法的一个例子。
功能handlegestureevent（事件）{
无功输出= document.getelementbyid（输出）；
开关（事件类型）{
案例gesturestart ：
output.innerhtml = 的姿态开始（旋转=+ event.rotation +）

打破；
案例gestureend ：
output.innerhtml =手势（结束+ event.rotation +旋转=

打破；
案例gesturechange ：
output.innerhtml =手势（改变+ event.rotation +旋转=

打破；
}
}
Document.addEventListener（gesturestart
Document.addEventListener（gestureend
Document.addEventListener（gesturechange

与前面触摸事件的示例一样，这里的代码只将每个事件关联到同一个函数，然后通过此函数输出每个事件的相关信息。

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。