javascript - Mobile WebKit 记住点击位置？

Question

我目前正在开发一个用于 WebKit 设备的私有(private)框架。我创建了一系列 ListView ，当用户触摸开始时，我正在向这些 View 应用 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 元素(它是 li 中的 a 元素)上点击一次，然后将手指从屏幕上移开。显示一个包含另一个列表的新 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');
});