터치 장치에서 jQuery 호버 (mouseenter, mouseleave)를 무시하십시오.

Question

마우스 나 포인터가 없어도 화면상의 요소를 가리키는 개념은 터치 장치에는 실제로 적용 할 수 없습니다. 자바 스크립트 호버 이벤트 탐색 또는 다른 목적에 의존하는 많은 웹 사이트에서 일부 터치 장치 은 한 번의 탭으로 mouseenter을 실행합니다. 이벤트 처리기도 click에 바인딩 된 경우 요소의 두 번째 탭에서만 발생합니다.

hover() jQuery의 기능 및 내부 mouseentermouseleave 사용하므로

는 모두 hover() 및 click() 등록 요소와 후자 ²을 트리거하는 두 개의 탭을 필요로한다. 많은 유스 케이스의 경우, 이것은 정확히 당신이 원하는 것입니다. 그러나 hover() 핸들링이 커서가있는 요소에만 강조 (툴팁, 글로우 등)를 추가하는 응용 프로그램에서는 onclick 핸들러에 해를 끼치는 모든 이벤트를 건너 뛰는 것이 더 합리적 일 수 있습니다.

나는 터치 사용자 경험을 맞춤 설정할 수 있도록 touchstart 및 touchend 이벤트를 특별히 듣는 방법을 알고 있습니다. 이것은 내 문제에 대한 유효한 해결책이지만,이 문제를 해결하는 "쉬운"방법이 있기를 희망합니다. 나는 서명 된 hover()과 비슷한 메서드를 상상하고 있는데, 제공된 터치 핸들러 만 비접촉 장치에 부착하는 방식으로 구현됩니다.

jQuery에는 이러한 메소드가 있습니까? 모든 플러그인? 또는 나는 무엇인가 여기에서 멀리 바라보고 있냐?

---

¹ 행동은 아이 패드, 아이폰과 몇 안드로이드 단말기에 확인했다.

바탕 화면과 터치 장치에서이 JsFiddle demo을 실행하면 내가 말하는 내용을 볼 수 있습니다.

Answer 1

나는 장치의 touchyness을 감지 모더 나이저를 사용하고 html 요소는 "노터치"클래스하지 않는 한 단순히 호버 처리기를 바인딩하지 않는 것이 좋습니다 :

$('selector').click(...) 
$('.no-touch selector').hover(...) 

체크 아웃 http://jsfiddle.net/juYf8/17/

Answer 2

I을 터치 및 클릭/호버 이벤트를 지원하는 하이브리드 장치에서 어떤 일이 일어나는지 궁금합니다. 이 경우 한 번 만져도 페이지에서 마우스 오버 또는 클릭 이벤트가 더 이상 사용되지 않습니다. 사용자가 한 번만 화면을 터치 한 후 (어떤 이유로) 마우스 나 터치 패드를 사용하여 돌아올 수 있습니까? 그 사이트는 그를 위해 부러졌다. (최소한 그가 계속 터치를 계속하기로 결정하지 않는다면).

개인적으로 아래에있는 플래그 스크립트를 사용하고 마우스를 놓고 마우스가 닿았을 때 이벤트가 발생하는지 확인합니다. 이것이 좋은 기술인지 나는 모른다. 제 경우에는 꽤 잘 작동합니다.

var touched = false; 

$("#someElement") 
    .mouseenter(function() { 
     if (!touched) { 
      // some hover action 
      // also secure to be in NO WAY triggered on touch device 
     }; 
    } 
    .mouseleave(function() { 
     if (!touched) { 
      // some mouse leave reset hover action 
      // also secure to be in NO WAY triggered on touch device 
     }; 
    } 
    .click(function() { 
     if (!touched) { 
      // do something 
      // no double trigger on touch device 
     }; 
    } 
    .on('touchstart', function() { 
     touched = true; 
     setTimeout(function() { 
      touched = false; 
     }, 300); 
     // do touchstart stuff (similar to click or not) 
    }; 

저는 전문적인 코더가 아닙니다. 그 중 누구라도 그것을 최적화하도록 초대받습니다. 내 웹 페이지에서 터치 장치 (iPad 테스트)에서 숨겨진 (이중) 트리거를 피할 수있는 유일한 방법 인 것 같습니다.

나는 또한 널리 사용되는 경우에도 내 눈으로 하이브리드 문제를 완전히 해결하지 못하는 첫 번째 답변 (및 그 좋은 설명)에 대한 질문에 대한 답변이 아님을 잘 알고 있습니다.

어쨌든 이것이 도움이되기를 바랍니다.