locating elements in touch events (mobile safari)

Question

I am working with Javascript events ( a subject completely foreign to me ) and am in need of some guidance on handling touch events in mobile safari.

I have a document that looks something like:

<div>
    <span>one</span><span>two</span>
</div>

I want to highlight whatever span the user is currently touching.

I have successfully go

Answer 1

The solution I worked out is to add eventListeners to the document:

    document.addEventListener("touchstart", touchStart, "true");
    document.addEventListener("touchmove", touchMove, "true");
    document.addEventListener("touchend", touchEnd, "true");

Then do what you need to with each touch event. I star this because its not the event itself that has a location (like in normal event handling), it's the set of touches that have locations.

    function touchMove(event)
{
    // // Prevent the webview itself from scrolling / bouncing around
     event.preventDefault();
    // Only track one finger
    if ( event.touches.length == 1)
    {
        var touch = event.touches[0];
        doStuffAtPosition(touch.pageX, touch.pageY);
    }
}

Answer 2

You might want to checkout http://www.jqtouch.com/

It creates an event called "tap" https://github.com/senchalabs/jQTouch/wiki/callbackevents

You can play with a demo of jqtouch here http://www.jqtouch.com/preview/demos/main/#home