2013-04-11 5 views
0

나는 의류 브랜드에 대한 반응 쇼핑 사이트를 만드는 오전 touchcreen 장치에 기능 onmouseout 사용하지 않고 http://www.blackmilkclothing.com을에 같이 앞면과 제품의 뒷면을 보여 내 <img> 태그에 onmouseover=""onmouseout="" 영향을어떻게 onmouse 만

그러나 터치 스크린 장치에서 사이트를 볼 때 호버 효과는 분명히 클릭 기능으로 설정됩니다. 유창하게 아래로 스크롤 할 수 없게합니다.

터치 스크린 장치에서만이 효과를 어떻게 비활성화 할 수 있습니까? 는 여기에 내가 약 http://modernizr.com/ 당신이 뷰어는 터치 스크린이 아닌지 알 수있는을 생각할 수있는 이미지

<div class="product"> 
    <a href=""> 
     <img src="pic.jpg"onmouseover="this.src='pic2.jpg'"onmouseout="this.src='pic.jpg'" /> 
    </a> 
</div> 

답변

0

Detecting touch screen devices with Javascript - 터치 스크린 감지 방법. 코드 :

var is_touch_device = 'ontouchstart' in document.documentElement; 
    if (is_touch_device) { 
    var elements = document.getElementsByTagName("img"); 
    for (var i=0;i<elements.length;i++) { 
     elements[i].onmouseover = null; 
     elements[i].onmouseout = null; 
    } 
} 
+0

감사합니다. 여전히 사이트와 스크롤 문제가 있지만 내가 알아낼 수없는 다른 뭔가가 있어야합니다 – aztekgold

0

내 코드입니다.

플러그인이는 터치 스크린

0

I없이 장치에 대한 mouseover 이벤트를 추가 할 <html>.touch.no-touch

에 클래스가 이제

if($('html').hasClass('no-touch')){ 
    $('img').mouseover(function(){ //change pic 
      }).mouseout(function(){ //change back 
      }); 
} 

처럼 뭔가를 할 수 추가 페이지로드시 사용자 에이전트를 테스트하고 "onmouseover"및 "onmouseout"이벤트를 동적으로 할당해야한다고 생각합니다 (사용자 에이전트가 모바일이 아닌 경우). 모두 JQuery를 사용합니다. 에리 또는 자바 스크립트.