Mobile WebKit запоминает позицию нажатия? - PullRequest
Новая
       14

Mobile WebKit запоминает позицию нажатия?

0 голосов
/ 25 августа 2011

В настоящее время я разрабатываю частную платформу для использования на устройствах 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, хотя я его не трогал ...

enter image description here enter image description here

Может кто-нибудь помочь мне отладить это или разобраться, почему это происходит в 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');
}

Большое спасибо за любую помощь, и извините, что пошли!

1 Ответ

1 голос
/ 14 июня 2012

попробуйте 

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