javascript - How can I react when a user touches an HTML element on an iPhone? -

i'm displaying html content in iphone app using uiwebview. have image link, , want change when user touches - @ moment user puts finger on screen, rather waiting until lift finger off.

what css or javascript concept accomplish this? i've looked @ hover , active states in css, don't seem i'm after: hover relates touch-up rather touch-down, while active seems have no effect @ all.

you try this.

i think should looking for!

http://articles.sitepoint.com/article/iphone-development-12-tips/2

8: touch events

of course, use iphone finger instead of mouse; rather clicking, tap. what’s more, can use several fingers touch , tap. on iphone, mouse events replaced touch events. are:

• touchstart
• touchend
• touchmove
• touchcancel (when system cancels touch)

when subscribe of events, event listener receive event object. event object has important properties, such as:

• touches — collection of touch objects, 1 each finger touches screen. touch objects have, example, pagex , pagey properties containing coordinates of touch within page.
• targettouches — works touches, registers touches on target element opposed whole page.

the next example simple implementation of drag , drop. let’s put box on blank page , drag around. need subscribe touchmove event , update position of box finger moves around, so:

window.addeventlistener('load', function() {     var b = document.getelementbyid('box'),           xbox = b.offsetwidth  / 2, // half box width           ybox = b.offsetheight / 2, // half box height           bstyle = b.style; // cached access style object       b.addeventlistener('touchmove', function(event) {              event.preventdefault(); // default behaviour scrolling              bstyle.left = event.targettouches[0].pagex - xbox + 'px';         bstyle.top  = event.targettouches[0].pagey - ybox + 'px';     }, false);   }, false); 

the touchmove event listener first cancels default behavior of finger move—otherwise safari scroll page. collection event.targettouches contains list of data each finger on target div element.
care 1 finger, use event.targettouches[0]. pagex gives x coordinate of finger. value subtract half width of div finger stays in center of box.

hope helps!