0

現在、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 で同じ動作が発生するとは予想していませんでした。以下に、いくつかのスクリーンショットとシナリオの簡単な説明を示します。aList Views 要素 (内の要素) を 1 回タップliし、画面から指を離します。div別のリストを含む新しいリストが表示されます。div現在表示されている新しいものを何もタップせずに、触れていないのに、2番目liのクラスはです...hover

ここに画像の説明を入力 ここに画像の説明を入力

これをデバッグしたり、モバイル 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');
}

助けてくれてありがとう、そして取り乱してごめんなさい！

4

1 に答える 1

1

これを試して

$('body').bind('touchend',function(){
     $('#p-promotion-main .e-container.hover').removeClass('hover');
});
于 2012-06-14T02:35:54.987 に答える