JavaScript event analysis in touch screens_javascript skills

The examples in this article describe JavaScript events in touch screens. Share it with everyone for your reference. The specific analysis is as follows:

1. Touch event

ontouchstart
ontouchmove
ontouchend
ontouchcancel Currently, all mobile browsers support these four touch events, including IE. Since touch screens also support MouseEvent, their order needs to be noted: touchstart → mouseover → mousemove → mousedown → mouseup → click1

Examples are as follows:

/**
* onTouchEvent
*/
var div = document.getElementById("div");
//touchstart类似mousedown
div.ontouchstart = function(e){
//事件的touches属性是一个数组，其中一个元素代表同一时刻的一个触控点，
//从而可以通过touches获取多点触控的每个触控点
//由于我们只有一点触控，所以直接指向[0]
var touch = e.touches[0];
//获取当前触控点的坐标，等同于MouseEvent事件的clientX/clientY
var x = touch.clientX;
var y = touch.clientY;
};
//touchmove类似mousemove
div.ontouchmove = function(e){
//可为touchstart、touchmove事件加上preventDefault从而阻止触摸时，
//浏览器的缩放、滚动条滚动等
e.preventDefault();
};
//touchend类似mouseup
div.ontouchup = function(e){
//nothing to do
};

2. Gesture events Gestures refer to the use of multi-touch to perform operations such as rotation and stretching, such as magnification and rotation of pictures and web pages. Gesture events are triggered only when two or more fingers touch at the same time. One thing we need to pay attention to about scaling is the position coordinates of the element: we usually use offsetX, getBoundingClientRect and other methods to obtain the position coordinates of the element. However, in mobile browsers, the page is often scaled during use, and the scaled element coordinates will change. ? The answer is that it varies. Let's use a scenario to illustrate this problem: After page A is loaded, JavaScript obtains the coordinates of the element in the document as (100,100), and then the user zooms in on the page. At this time, JavaScript is used to output the coordinates of the element again, which is still (100,100). However, the element's responsive area on the screen will be offset based on the scaling. You can open the demo of the Brick Breaker game, wait until the page is fully loaded, and then zoom in. At this time, you will find that even if your finger touches outside the "touch here" area, you can still control the ball board because the area is offset. The offset will persist unless the page is refreshed or scaling is resumed.

/**
* onGestureEvent
*/
var div = document.getElementById("div");
div.ongesturechange = function(e){
//scale代表手势产生的缩放比例，小于1是缩小，大于1是放大，原始为1
var scale = e.scale;
//rotation代表旋转手势的角度，值区间[0,360]，正值顺时针旋转，负值逆时针
var angle = e.rotation;
};

3. Gravity sensing Gravity sensing is relatively simple. You only need to add the onorientationchange event to the body node. In this event, the value representing the current mobile phone orientation is obtained from the window.orientation property. The value list of window.orientation is as follows:

0: Same direction as when the page was first loaded
-90: Rotated 90° clockwise relative to the original direction
180: turned 180°
90: Turned 90° counterclockwise. According to my testing, Android 2.1 does not yet support gravity sensing. The above are the current touch screen events. These events have not yet been incorporated into the standard, but they are already widely used. I have Android 2.1 and have not tested it in other environments.

I hope this article will be helpful to everyone’s JavaScript programming design.