Mobile WebKit remembering click position?

I am currently developing a private framework for use on WebKit devices. I have created a series of list views, to which I am applying a class of hover when the user touchstarts on something. Here's the jQuery / JavaScript code that I am using to add this, and the CSS to matched class:

    $('*').bind('touchstart', function() { $(this).addClass('hover'); }).bind('touchend', function() { $(this).removeClass('hover') });

And the CSS:

 ul li:hover,
 ul li.hover {
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(5,140,245,1)), color-stop(100%,rgba(1,96,230,1)));
     background: -webkit-linear-gradient(top, rgba(5,140,245,1) 0%,rgba(1,96,230,1) 100%);
     color: #fff
 }       
     ul li:hover a,
     ul li.hover a {
         background-position: right -38px
     }

This seems to work as expected when viewing in Chrome (or some desktop Webkit-enabled Browser), except for the fact that if the mouse position doesn't move between transitions of screens, the list element on the new screens becomes hovered. This is obviously to be expected, since the :hover pseudo-class has been fired.

However, I didn't expect the same behaviour to occur in iPhone's Mobile Safari. Here are some screenshots and a brief explanation of the scenario. I tap once on the List Views element (which is an a element inside an li) and remove my finger from the screen. A new div is shown containing another list. Without tapping anything on the new div which is now displayed, the second li has a class of hover, even though I haven't touched it...

Can anyone help me debug this, or work out why this is happening on Mobile WebKit? It's very annoying, as it's poor HCI. I tried adding the following line to rectify the issue, but no joy:

if(window.location.hash)
{
    var the_hash = window.location.hash.substring(1);
    if($('#' + the_hash).length > 0)
    {
        $('.current').removeClass('current');
        $('#' + the_hash).find('*').removeClass('hover');
        $('#' + the_hash).addClass('current');
    }
}
else
{
    $('div').eq(0).addClass('current');
} 

Advanced thanks for any help, and sorry to ramble!

Answers


try this

$('body').bind('touchend',function(){
     $('#p-promotion-main .e-container.hover').removeClass('hover');
});

Need Your Help

Using startTrackPage in Application Insights

javascript jquery azure azure-application-insights

I have recently been messing around with Application Insights and have been having a problem with getting the JavaScript API to work. In the default script that you are supposed to add to your page,

Issues with how to "Embed an External Page Without an Iframe

html iframe embed

I have been trying to follow the instructions in this question, but have been having an issue. Namely: it doesn't work. I have been trying to do the method described in the second answer (the one t...