Phone-side HTML5 touchscreen events (touch events)

Touchstart:Trigger when the touch starts

touchmove: triggers when the finger slides on the screen

touchend: trigger at end of touch

Each touch event includes three touch lists, each containing a series of touch points (for multi-Touch):

touches: A list of all the fingers that are currently on the screen.

targettouches: The list of fingers that are located on the current DOM element.

changedtouches: A list that involves the finger of the current event.

Each touch point consists of the following touch information (commonly used):

identifier: A numeric value that uniquely identifies the current finger in a touch session. Usually starting from 0 serial number (ANDROID4.1,UC)

Target: The DOM element, which is the target of the action.

Pagex/pagex/clientx/clienty/screenx/screeny: A numeric value where the action occurs on the screen (page contains scrolling distance, the client does not contain scrolling distance, and screen is based on screens).

Radiusx/radiusy/rotationangle: draws approximately the shape of a finger oval, respectively, two radius and rotation angle of the ellipse. Initial test browser does not support, fortunately the function is not commonly used, welcome feedback.

var obj = document.getElementByIdx_x( ‘id‘ ); obj.addEventListener( ‘touchmove‘ ,  function (event) {       // 如果这个元素的位置内只有一个手指的话      if (event.targetTouches.length == 1) { 　　　　 event.preventDefault(); // 阻止浏览器默认事件，重要           var touch = event.targetTouches[0];          // 把元素放在手指所在的位置          obj.style.left = touch.pageX-50 +  ‘px‘ ;          obj.style.top = touch.pageY-50 +  ‘px‘ ;          } },  false );

Phone-side HTML5 touchscreen events (touch events)