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

Question

I'm displaying some HTML content in my iPhone app using a UIWebView. I have an image link, and I want it to change when the user touches it - at the moment the user puts a finger on the screen, rather than waiting until they lift their finger back off.

What CSS or JavaScript concept could accomplish this? I've looked at the hover and active states in CSS, but they don't seem to be what I'm after: hover relates to touch-up rather than touch-down, while active seems to have no effect at all.

Answer 1

You could try this.

I think it should be what you are looking for!

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

8: Touch Events

Of course, you use your iPhone with a finger instead of a mouse; rather than clicking, you tap. What’s more, you can use several fingers to touch and tap. On the iPhone, mouse events are replaced by touch events. They are:

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

When you subscribe to any of those events, your event listener will receive an event object. The event object has some important properties, such as:

• touches — a collection of touch objects, one for each finger that touches the screen. The touch objects have, for example, pageX and pageY properties containing the coordinates of the touch within the page.
• targetTouches — works like touches, but only registers touches on a target element as opposed to the whole page.

The next example is a simple implementation of drag and drop. Let’s put a box on a blank page and drag it around. All you need to do is subscribe to the touchmove event and update the position of the box as the finger moves around, like so:

window.addEventListener('load', function() {
    var b = document.getElementById('box'),  
        xbox = b.offsetWidth  / 2, // half the box width  
        ybox = b.offsetHeight / 2, // half the box height  
        bstyle = b.style; // cached access to the style object  
    b.addEventListener('touchmove', function(event) {     
        event.preventDefault(); // the default behaviour is 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 the default behavior of the finger move—otherwise Safari will scroll the page. The collection event.targetTouches contains a list of data for each finger currently on the target div element.
We only care about one finger, so we use event.targetTouches[0]. Then pageX gives us the X coordinate of the finger. From this value we subtract half the width of the div so that the finger stays in the center of the box.

Hope it helps!

Answer 2

Try the Javascript "onMouseDown", hopefully the mobile Safari will fire the event.

<a href="#any_URL" onMouseDown="callSomeFunction();return true;">Link</a>