移动WebKit记住点击位置？

Question

我目前正在开发一个在WebKit设备上使用的私有框架。我创建了一系列列表视图，当用户触摸某些内容时，我正在应用hover类。这是我用来添加它的jQuery / JavaScript代码，以及匹配类的CSS：

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

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
     }

在Chrome浏览器（或某些支持Webkit的桌面浏览器）中查看时似乎正常工作，除了如果鼠标位置不在屏幕转换之间移动这一事实，新屏幕上的列表元素将变为悬停。这显然是预料之中的，因为:hover伪类已被触发。

但是，我没想到iPhone的Mobile Safari会出现同样的行为。以下是一些截图和场景的简要说明。我点击List Views元素（a内的li元素）并从屏幕上移开手指。显示包含另一个列表的新div。如果没有点击现在显示的新div上的任何内容，则第二个li会有一个hover类，即使我没有触及它......

任何人都可以帮我调试这个，或者解决为什么会在Mobile WebKit上发生这种情况？这很烦人，因为它是糟糕的HCI。我尝试添加以下行来纠正问题，但没有快乐：

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');
} 

高级感谢任何帮助，抱歉絮絮叨叨！

Answer 1

试试这个

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