HTML5 's mobile touch screen event

HTML5 's JavaScript Touch eventHTML5+CSS3, javascript Add Comments Four - -

 

Here are a few of the more popular touch events that can be tested in most modern browsers (must be a touchscreen device): (ON) Touchstart: Trigger when Touch starts (ON) Touchmove: triggers when the finger is sliding on the screen (ON) Touchend: Triggers when Touch ends (ON) Touchcancel: triggers when the system cancels the touch event. such as telephone access or pop-up information. Generally used in the game: when playing, suddenly came to the phone, triggered Touchcancel event pause game, archive and other operations.

Each touch event includes a list of three touch objects, each containing a corresponding series of touch points (touch objects for multi-touch): touches: A list of all the fingers 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.

identifier: A numeric value, the unique ID of the touch object, uniquely identifies the current finger in the touch session. It is usually a serial number starting from 0 (ANDROID4.1,UC) target:dom element, which is the target of the action. Client/clienty: The position of the touch point relative to the browser window viewport, with no scrolling distance pagex/pagey: The position of the touch point relative to the page, including the scrolling distance Screenx/screeny: The position of the touch point relative to the screen radiusx/ Radiusy/rotationangle: Draws approximately the shape of a finger oval, respectively, two radius and rotation angle of the ellipse. Initial test browser is not supported, fortunately features are not commonly used. With this information, you can provide users with different feedback based on these event messages.

The relationship between touch events and mouse events after a touch-screen operation, the moment the finger is lifted (i.e., after Touchend), the system will determine whether the content of the element receiving the event has been changed, and if the content is changed, it will resolve to the touch event, The next click event is not triggered, and if the content does not change, it resolves to the click event, triggering the event in the order of Mousedown,mouseup,click. In particular, when resolving to the Click event, the Mouseout event of the previous event is triggered only if another touch event is triggered. So there is a little trick about hover, when clicked on a button, this button will always be in the state of hover, at this time based on the pseudo-class set CSS is also working, until you click another place with your finger to complete the Mouseout event.

The gesture event (gesture event) is similar to the touch event and is used much more by the gesture event, which is described in the next article.

Touch Event Demo

<meta name= "viewport" content= "width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0, Minimum-scale=1.0,user-scalable=0 ">

<div id= "Canvas" > <div id= "Move" ></div> </div>

<style> *{margin:0;padding:0;} html,body{width:100%;height:100%;} #canvas {position:relative;width:100%; height:100%;} #move {position:absolute;width:100px;height:100px;background: #0F0;}. Spirit {Position:absolute;width:50px;height : 50px;background-color:red;} </style>

<script> var canvas = document.getElementById ("Canvas"); var spirit, StartX, starty; var a = 1; Touch Start Listener Function Touchstart (event) {Event.preventdefault (); if (Spirit | |! event.touches.length) return; var touch = event.touches[0]; StartX = Touch.pagex; Starty = Touch.pagey; Spirit = document.createelement ("div"); Spirit.classname = "Spirit"; Spirit.style.left = startX-50 + "px"; Spirit.style.top = startY-50 + "px"; Canvas.appendchild (spirit); spirit.innerhtml = a++;  }//Touch Move Listener function TouchMove (event) {Event.preventdefault (); if (!spirit | |!event.touches.length) return; var touch = event.touches[0]; Spirit.style.left = touch.pagex-50 + "px"; Spirit.style.top = touch.pagey-50 + "px"; or use the following var x = Touch.pagex-startx; var y = touch.pagey-starty; Spirit.style.webkitTransform = ' translate (' + x + ' px, ' + y + ' px) '; }//Touch End Listener Function Touchend (event) {if (!spirit) return; Canvas.removechild (spirit); spirit = null;}Add Touch Start Listener canvas.addeventlistener ("Touchstart", Touchstart, false); Canvas.addeventlistener ("Touchmove", Touchmove, false); Canvas.addeventlistener ("Touchend", Touchend, false); </script>