移动WebKit记住点击位置？

我目前正在开发一个在WebKit设备上使用的私有框架。我创建了一系列列表视图，当用户触摸某物时，我正在应用一类hover。下面是jQuery的/ JavaScript代码，我使用添加此，和CSS来匹配类：移动WebKit记住点击位置？

$('*').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，即使我没有碰过它...

enter image description here

谁能帮我调试此，或者弄清楚为什么在移动WebKit上发生这种情况？这是非常烦人的，因为它是可怜的人机交互。我试着加入下面这一行来纠正这个问题，但没有快乐：

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

先进的谢谢你的任何帮助，并抱歉漫步！

来源

2011-08-25 BenM

试试这个

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

来源

2012-06-14 02:35:54 pcpcppc

移动WebKit记住点击位置？

回答

相关问题