jQuery double tab to replace hover on links

Question

I'm using the following code for touch devices. My page has several div's that serve as links. The first tap essentially acts as a "hover", enabling the class (.active). The second tap serves as a click where the url is taken from the data-url attribute.

$(".story").on({'touchstart':
    function(){
        $(".active").removeClass("active"); //Deactivate "active" elements
        $(this).stop(true,true).addClass("active",300).children(".blurb").delay(300).fadeIn(350,function(){
            $(this).click(function(){var url = $(this).data("url"); window.location.href = url;})
        });
    }
});

My problem is if a user taps once on an element (say #story1), then taps on a DIFFERENT element (#story2), then goes back and taps on #story1, it launches the link as opposed to the .active class.

I assume I need to stop that callback function from triggering if the user leaves the current element. Can anyone help shed some light on that?

Thanks

Answer 1

Maybe not the best solution, but here is the work-around I have come up with.

$(".story").on({"touchstart":
    function(){
        var clicked = $(this).data("clicked");
        if (clicked == "0"){
            $(".story").data("clicked","0");
            $(this).data("clicked","1");
            $(".active").removeClass("active");
            $(this).stop(true,true).addClass("active",300).children(".blurb").delay(300).fadeIn(350);                       
        }
        else {
            var url = $(this).data("url");
            window.location.href = url;}
        }
});

Answer 2

the fadeIn function takes that own this element so you need declare this in out of the fadeIn function

$(".story").on({'touchstart':
    function(){
     var _this = $(this);
        $(".active").removeClass("active"); //Deactivate "active" elements
        $(this).stop(true,true).addClass("active",300).children(".blurb").delay(300).fadeIn(350,function(){
           _this.click(function(){

               var url = _this.data("url"); 
               window.location.href = url;
});
        });
    }
});