2011-08-25 6 views
0

현재 WebKit 장치에서 사용할 개인 프레임 워크를 개발 중입니다. 사용자가 뭔가를 터치 할 때 hover 클래스를 적용 할 일련의 목록보기를 만들었습니다.모바일 웹킷이 클릭 위치를 기억하고 있습니까?

$('*').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 
    } 

이 보인다 여기에 내가이 추가 사용하고있는 jQuery를/자바 스크립트 코드와 일치하는 클래스에 CSS입니다 또는 일부 데스크탑 Webkit 가능 브라우저). 단, 마우스 위치가 화면 전환 사이에서 이동하지 않으면 새 화면의 목록 요소가 마우스를 가리 키지 않습니다. :hover 가상 클래스가 해고되었으므로 분명히 예상 할 수 있습니다.

그러나 iPhone의 Mobile Safari에서 동일한 동작이 발생할 것으로 예상하지 않았습니다. 다음은 몇 가지 스크린 샷과 시나리오에 대한 간략한 설명입니다. 목록보기 요소 (li 안에있는 a 요소)를 한 번 탭하고 화면에서 내 손가락을 뗍니다. 새로운 div은 다른 목록을 포함하고 있습니다. 이제 표시되는 새 div에 아무것도 누르지 않고, 두 번째 li 사람이 날이 디버그를 할 수

enter image description here enter image description here

... 내가 손도 안하더라도, hover의 클래스가, 왜 모바일 웹킷에서 이런 일이 일어나고 있는지 생각해보십시오. 그것은 가난한 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

$('body').bind('touchend',function(){ 
    $('#p-promotion-main .e-container.hover').removeClass('hover'); 
}); 
시도
관련 문제