Introduction of mobile phone station construction HTML5 touching screen touch event usage

Introduction of mobile phone station construction HTML5 touching screen touch event usage Technology

Maybe yes posted on 2015-01-05 14:42

Original link: http://blog.lmlphp.com/archives/56 from: lmlphp backyard

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:

<script>var obj = document.getElementById (' id '); Obj.addeventlistener (' Touchstart ', Touchstart, false); O Bj.addeventlistener (' Touchmove ', Touchmove, false); Obj.addeventlistener (' Touchend ', touchend, false); var touchmove = function (event) {if (event.targetTouches.length = = 1) {//Prevent default event.preventdefault (); var touch = Event.target touches[0];//do something}};</script>

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/pagex/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.

Read (50) reviews (0) View comments

Introduction of mobile phone station construction HTML5 touching screen touch event usage