[JQUERY] $ (문서) .click ()는 아이폰에서 제대로 작동하지 않습니다. JQuery와 [중복]

$ (문서) .click ()는 아이폰에서 제대로 작동하지 않습니다. JQuery와 [중복]

해결법

1. ---

   1.짧은 답변:

   짧은 답변:

   <style>
       .clickable-div 
       {
            cursor: pointer;
       }
   </style>
   

   긴 대답 :

   그것은 당신이 단지 태그를 사용하는 경우 모든 것이 예상대로 작동하는지 파악하는 것이 중요합니다. 당신이 기대하는 사용자와 일반 아이폰에 링크 및 모든 것이 동작합니다에 실수로 클릭하거나 드래그 할 수 있습니다.

   같은 로 포장 할 수없는 패널을 포함하는 텍스트와 이미지로 - 당신이 클릭 할 수없는 임의의 HTML을 상상. 내가 완전히 클릭 할 수 싶었 같은 패널을했을 때 나는이 문제에 대해 알게되었습니다.

   <div class='clickable-div' data-href="http://www.stackoverflow.com">
   
    ... clickable content here (images/text) ...
   
   </div>
   

   나는 함께 jQuery를 사용하고이 사업부 내에서 클릭 어디서나 감지 데이터를-href가 HTML 위에 표시되는 속성 (이 속성은 자신에 의해 발명과 표준 jQuery를 또는 HTML 데이터 속성 아닙니다.)

   $(document).on('click', '.clickable-div', function() {
   
       document.location = $(this).data('href');
   
   });
   

   이것은 당신의 데스크톱 브라우저에서 작동하지만 아이 패드에 상관없이 당신은 클릭하지 얼마나.

   당신은 touchstart을 클릭 클릭에서 이벤트 핸들러를 변경하는 유혹 할 수있다 - 이것은 실제로 이벤트 핸들러를 트리거하지 않습니다. 사용자가 (스크롤) 페이지를 드래그하고자하는 경우에는 그들도 그것을 실행할거야 - 끔찍한 사용자 경험이다. [당신은 비열한 배너 광고하여이 동작을 발견했을 수 있습니다]

   대답은 매우 간단합니다 : 그냥은 CSS 커서를 설정 : 포인터.

   <style>
       .clickable-div 
       {
            cursor: pointer;
       }
   </style>
   

   이 데스크탑 사용자가 영역을 표시하기위한 추가 혜택이 손 아이콘을 클릭 할 수 있었다.

   https://stackoverflow.com/a/4910962/16940 덕분에

2. ---

   2.이 변경 :

   이 변경 :

   $(document).click( function () {
   

   이에

   $(document).on('click touchstart', function () {
   

   어쩌면이 솔루션은 작업에 맞지 않는 및 응답에 설명처럼이 적용 할 수있는 가장 좋은 방법은 아니다. 다른 사용자로부터 다른 수정 사항을 확인하시기 바랍니다.

3. ---

   3.다음 코드 작품에 추가.

   다음 코드 작품에 추가.

   문제는 아이폰이 인상 클릭 이벤트를 해달라고입니다. 그들은 "터치"이벤트를 발생. 정말 감사합니다 사과. 왜 그들은 단지 그것을 다른 사람 같은 표준 못했습니다? 팁을위한 어쨌든 덕분에 니코.

   신용 : http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript

   $(document).ready(function () {
     init();
     $(document).click(function (e) {
       fire(e);
     });
   });
   
   function fire(e) { alert('hi'); }
   
   function touchHandler(event)
   {
       var touches = event.changedTouches,
           first = touches[0],
           type = "";
   
       switch(event.type)
       {
          case "touchstart": type = "mousedown"; break;
          case "touchmove":  type = "mousemove"; break;        
          case "touchend":   type = "mouseup"; break;
          default: return;
       }
   
       //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
       //           screenX, screenY, clientX, clientY, ctrlKey, 
       //           altKey, shiftKey, metaKey, button, relatedTarget);
   
       var simulatedEvent = document.createEvent("MouseEvent");
       simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                             first.screenX, first.screenY, 
                             first.clientX, first.clientY, false, 
                             false, false, false, 0/*left*/, null);
   
       first.target.dispatchEvent(simulatedEvent);
       event.preventDefault();
   }
   
   function init() 
   {
       document.addEventListener("touchstart", touchHandler, true);
       document.addEventListener("touchmove", touchHandler, true);
       document.addEventListener("touchend", touchHandler, true);
       document.addEventListener("touchcancel", touchHandler, true);    
   }
   

4. ---

   4.당신은 크롬이나 파이어 폭스 모바일에서 모든 턴 파란색을하지 않는, 그래서 오직 아이폰과 아이팟에 적용이 시도;

   당신은 크롬이나 파이어 폭스 모바일에서 모든 턴 파란색을하지 않는, 그래서 오직 아이폰과 아이팟에 적용이 시도;

   /iP/i.test(navigator.userAgent) && $('*').css('cursor', 'pointer');
   

   기본적으로, iOS에서 상황은 기본적으로 "클릭"하지 - 그들은있는 거 "만질"(pfffff)는 그들에게 포인터 커서를 제공하여 그들이 "클릭"할 수 있도록. 총 감각 권리를 만든다?

5. ---

   5.CSS 커서 : 포인터; 좋은 솔루션입니다. FastClick https://github.com/ftlabs/fastclick 당신이 커서하지 않은 경우 당신이 CSS를 변경할 필요가 없습니다 또 다른 솔루션입니다 : 포인터; 어떤 이유에 대한 요소. 나는 iOS 기기에이 300ms 지연을 제거하기 위해 지금 어쨌든 fastclick 사용합니다.

   CSS 커서 : 포인터; 좋은 솔루션입니다. FastClick https://github.com/ftlabs/fastclick 당신이 커서하지 않은 경우 당신이 CSS를 변경할 필요가 없습니다 또 다른 솔루션입니다 : 포인터; 어떤 이유에 대한 요소. 나는 iOS 기기에이 300ms 지연을 제거하기 위해 지금 어쨌든 fastclick 사용합니다.

6. ---

   6.모바일 iOS의 클릭 이벤트는 문서 본문에없는 거품을 수행하고, 따라서 .live () 이벤트와 함께 사용할 수 없습니다. 당신은 사업부 또는 섹션 같은 비 네이티브 클릭 할 요소를 사용하는 경우 사용 커서입니다 : 포인터; 문제의 요소가 아닌 호버에 대한 CSS를한다. 그 못생긴 경우 위임으로 볼 수있다 ().

   모바일 iOS의 클릭 이벤트는 문서 본문에없는 거품을 수행하고, 따라서 .live () 이벤트와 함께 사용할 수 없습니다. 당신은 사업부 또는 섹션 같은 비 네이티브 클릭 할 요소를 사용하는 경우 사용 커서입니다 : 포인터; 문제의 요소가 아닌 호버에 대한 CSS를한다. 그 못생긴 경우 위임으로 볼 수있다 ().

7. ---

   7.사용 jQTouch 대신 -의 jQuery를 모바일 버전입니다

   사용 jQTouch 대신 -의 jQuery를 모바일 버전입니다

8. ---

   8.프로젝트에이를 포함합니다. GitHub의에서 "추가 정보"를 확인합니다. https://github.com/tomasz-swirski/iOS9-Safari-Click-Fix

   프로젝트에이를 포함합니다. GitHub의에서 "추가 정보"를 확인합니다. https://github.com/tomasz-swirski/iOS9-Safari-Click-Fix

from https://stackoverflow.com/questions/3705937/document-click-not-working-correctly-on-iphone-jquery by cc-by-sa and MIT license