ipad - Jquery hover function and click through on tablet

Question

I have a jquery slideshow that that uses a navigation list to switch out the slideshow images. How it works is when you hover over the nav list it highlights ('.active') and the associated image switches to that. There are links inside the nav list which can also be clicked to go to a different page.

I need this to work on a tablet so that when the person taps the nav list, it becomes active, then the image slideshow switches, then if you tap again it follows through to that link. Right now what is happening is that as soon as you tap it, it becomes active AND clicks through.

Here's the jquery

$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.8 }, 1 ); //Set Opacity

//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active'); 
$(".image_thumb ul li").hover(function(e){ 
    //Set Variables
    e.preventDefault();

    var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
    var imgTitle = $(this).find('a.imgloc').attr("href"); //Get Main Image URL
    var imgDesc = $(this).find('.block').html();    //Get HTML of block
    var imgDescHeight = $(".main_image").find('.block').height();   //Calculate height of block 
    if ($(this).is(".active")) {  //If it's already active, then...
        return false; // Don't click through
    } else {
        //Animate the Teaser                
        $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250, function() {
        $(".main_image .block").html(imgDesc).animate({ opacity: 0.8,   marginBottom: "0" }, 250 );
        $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
        });
    }

    $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
        $(this).addClass('active');  //add class of 'active' on this list only
        return false;
    });

And here's the html for the nav list

<div class="image_thumb">
    <ul>
        <li id="one">

            <h2><a href="styleguide.html">Text Text Text</a></h2>
            <p><a href="styleguide.html">Text Text Text</a></p>

            <a class="imgloc" href="content/images/home/01.jpg"></a>

            <div class="block">
                 <p>Text Text Text</p>
            </div>

        </li>
    </ul>
</div>

Here is an example of how it works: ocgoodwill.org

If anyone can help that would be great!

-- EDIT --

I also want to add that if a user has tapped onto one of the elements, then taps on a different one, the first one needs to be reset so that if they tap back onto it, it doesn't automatically click through.

Answer 1

UPDATE: after recently resorting to using this script again, I realized things can be done a lot simpler, not requiring any flags at all.

See revised code on my website.

Original answer:

Had the exact same issue today. I solved it using the data attribute, live bound to a touchstart event (which is a basic touch-device check, but you could make this more thorough). Try using the following code, replacing the 'clickable_element' to suit your needs.

$('clickable_element').live("touchstart",function(e){
    if ($(this).data('clicked_once')) {
        // element has been tapped (hovered), reset 'clicked_once' data flag and return true
        $(this).data('clicked_once', false);
        return true;
    } else {
        // element has not been tapped (hovered) yet, set 'clicked_once' data flag to true
        e.preventDefault();
        $(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this.
        $(this).data('clicked_once', true);
    }
});

This should stop the tablet from activating the link on the first tap, activating it on the second tap.

Edit: in case of multiple link elements, which need to be 'reset' when one of the other elements are clicked, try attaching the data attribute to the parent container:

The HTML:

<div id="parent-element">
    <a href="" id="1">Link 1</a>
    <a href="" id="2">Link 2</a>
    <a href="" id="3">Link 3</a>
</div>

jQuery:

$('#parent-element a').live("touchstart",function(e){
    var $link_id = $(this).attr('id');
    if ($(this).parent().data('clicked') == $link_id) {
        // element has been tapped (hovered), reset 'clicked' data flag on parent element and return true (activates link)
        $(this).parent().data('clicked', null);
        return true;
    } else {
        // element has not been tapped (hovered) yet, set 'clicked' data flag on parent element to id of clicked link, and prevent click
        e.preventDefault(); // return false; on the end of this else statement would do the same
        $(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this. I do suggest adding a class with addClass, as this is much more reliable.
        $(this).parent().data('clicked', $link_id);
    }
});