HTML5 Touchscreen Touch Event Usage Introduction 1

There are many kinds of mobile phones on the market, and the Web pages running on touch-screen phones are quite different from those of traditional PC pages. Because the device's different browser events are designed differently. Events such as the Click and onmouseover of traditional PC stations can also be used on mobile phones with general touchscreen, but the results are not good enough. There is no event on the PC that corresponds to the touch event of the touchscreen phone, and for a better user experience, the construction of the mobile site also requires processing of different events.

Describes several compatible touch events, most of which are supported by touch-screen devices.

Touchstart: Trigger when Touch is started

touchmove: Triggers when the finger slides on the screen while touching

touchend: Trigger at end of touch

touchcancel: Triggered when the system cancels the touch event

Event bindings, code examples:

varobj = document.getElementById (' id '); Obj.addeventlistener (' Touchstart ', Touchstart,false); Obj.addeventlistener (' Touchmove ', Touchmove,false); Obj.addeventlistener (' Touchend ', Touchend,false);varTouchMove =function(event) {if(Event.targetTouches.length = = 1) {        //Prevent defaultEvent.preventdefault (); varTouch = Event.targettouches[0]; //Do something    }};

Touch Event Properties Introduction

Touches: The list of all the contacts currently on the screen, supported by iOS, is generally not sensitive to multitouch for Android browsers.

targettouches: The DOM node that is below the current contact.

changedtouches: The contact point when the event is triggered.

Each touch point consists of the following touch information

Identifier: uniquely identifies a touch session.

Target: The event target DOM element.

Pagex/pagey/clientx/clienty/screenx/screeny: The location of the page/window/screen.

Radiusx/radiusy/rotationangle: Draws approximately the shape of a finger oval, respectively, two radius and rotation angle of the ellipse.

Instructions for use:

        //Touchstart Trigger when touch screen is started        //using e.targettouches[0] to get the contact pointWindow.addeventlistener (' Touchstart ',function(e) {console.info (e); if(e.targettouches.length==1){                varTouch = E.targettouches[0];                Console.info (Touch);                Console.info (Touch.pagex);            Console.info (Touch.pagey); }        },false); //touchmove touch Screen move process departure        //use e.targettouches[0] or e.changedtouches[0] to get the contact pointDocument.body.addEventListener (' Touchmove ',function(e) {console.info (e); if(E.targettouches.length = = 1) {                varTouch = E.targettouches[0];                Console.info (Touch);                Console.info (Touch.pagex);            Console.info (Touch.pagey); }            if(E.changedtouches.length = = 1) {                varTouch = E.changedtouches[0];                Console.info (Touch);                Console.info (Touch.pagex);            Console.info (Touch.pagey); } console.info (‘--------------------------‘);        }); //touchend touch screen End trigger        //using e.changedtouches[0] to get the contact pointWindow.addeventlistener (' Touchend ',function(e) {console.info (e); if(E.changedtouches.length = = 1) {                varTouch = E.changedtouches[0];                Console.info (Touch);                Console.info (Touch.pagex);            Console.info (Touch.pagey); }        }, false);

Goole TouchEvent object under Browser

Google Next Touch Object

FF under TouchEvent object

HTML5 Touchscreen Touch Event Usage Introduction 1