移動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記住點擊位置？

回答

相關問題