Mobile 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. Вот несколько скриншотов и краткое объяснение сценария. Я нажимаю один раз на элемент списка представлений (который является 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');
});