모바일 터치 장치에서 클릭 지연을 제거하는 방법이 있습니까?

Question

모바일 장치 (iPad, Galaxy Tab)에서 웹 사이트를 볼 때 요소 (일반 링크 또는 javascript/jquery를 사용하여 클릭 할 수있는 다른 요소)를 클릭하면 항상 지연이 있습니다.

온라인으로 읽는 동안 브라우저에서 터치 시작과 함께 touchend 이벤트가 발생하고 이후에 일반 클릭 이벤트가 트리거된다는 것을 알았습니다. 지연된 클릭 이벤트를 제거하고 반응 형 탭을 사용하는 방법이 있습니까? 어쩌면 자바 스크립트, 또는 다른 것을 사용하여?

Answer 1

웹 페이지를 직접 작성하는 경우 touchstart 및 touchend에 대한 수신기를 등록하고 지연없이 터치 엔드에서 직접 onclick 코드를 트리거 할 수 있습니다. 당신이 "빠른 버튼"을 만들기 위해 구글에서이 설명에서 봐 요소

에 (일부 지연과) 파견하는 클릭 이벤트를 브라우저를 이동 터치의 이벤트를 처리하지 않으시면

: http://code.google.com/intl/de-DE/mobile/articles/fast_buttons.html

Answer 2

Google의 라이브러리 (https://stackoverflow.com/a/9370637/1491212) 자체에서 변형 된 jQuery 플러그인을 작성했습니다. 이 같은

사용 : $('mySelector').fastClick(handler);

(function($){ 
    var clickbuster = { 
     preventGhostClick: function(x, y) { 
      clickbuster.coordinates.push(x, y); 
      window.setTimeout(clickbuster.pop, 2500); 
     }, 
     pop: function() { 
      clickbuster.coordinates.splice(0, 2); 
     }, 
     onClick: function(event) { 
      for (var i = 0; i < clickbuster.coordinates.length; i += 2) { 
      var x = clickbuster.coordinates[i]; 
      var y = clickbuster.coordinates[i + 1]; 
      if (Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) { 
       event.stopPropagation(); 
       event.preventDefault(); 
      } 
      } 
     } 
    }; 


    var methods = { 
     init: function(handler){ 
      return this.each(function() { 
       var $this = $(this), 
        data = $this.data('fastClick'); 
       if(!data){ 
        this.addEventListener('touchstart', methods.handleEvent, false); 
        this.addEventListener('click', methods.handleEvent, false); 
        $this.data('fastClick', { 
         target: $this, 
         handler: handler 
        }); 
       } 
      }); 
     }, 
     handleEvent:function(event) { 
      switch (event.type) { 
      case 'touchstart': $(this).fastClick('onTouchStart',event); break; 
      case 'touchmove': $(this).fastClick('onTouchMove',event); break; 
      case 'touchend': $(this).fastClick('onClick',event); break; 
      case 'click': $(this).fastClick('onClick',event); break; 
      } 
     }, 
     onTouchStart: function(event) { 
      event.stopPropagation(); 
      this[0].addEventListener('touchend', methods.handleEvent, false); 
      var _this = this; 
      document.body.addEventListener('touchmove', function(event){ 
      methods.handleEvent.apply(_this,[event]); 
      }, false); 

      $(this).data('fastClick').startX = event.touches[0].clientX; 
      $(this).data('fastClick').startY = event.touches[0].clientY; 
     }, 
     onTouchMove: function(event) { 
      if (Math.abs(event.touches[0].clientX - this.data('fastClick').startX) > 10 || 
       Math.abs(event.touches[0].clientY - this.data('fastClick').startY) > 10) { 
       this.fastClick('reset'); 
      } 
     }, 
     onClick: function(event) { 
      event.stopPropagation(); 
      $(this).fastClick('reset'); 
      $(this).data('fastClick').handler.call(this,event); 

      if (event.type == 'touchend') { 
      clickbuster.preventGhostClick($(this).data('fastClick').startX, $(this).data('fastClick').startY); 
      } 
     }, 
     reset: function() { 
      this[0].removeEventListener('touchend', methods.handleEvent, false); 
      document.body.removeEventListener('touchmove', methods.handleEvent, false); 
     } 
    } 
    $.fn.fastClick = function(method) { 
     if (methods[method]) { 
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof method === 'object' || typeof method === 'function' || !method) { 
      return methods.init.apply(this, arguments); 
     } else { 
      $.error('Method ' + method + ' does not exist on jQuery.hScroll'); 
     } 

    } 

    clickbuster.coordinates = []; 
    document.addEventListener('click', clickbuster.onClick, true); 

})(jQuery); 

Answer 3

나는 감지를 사용하는 경우 모더 나이저 같은 장치 지원 터치. 나는 'click' 또는 'touchend' 옵션이 터치 장치 인 경우 touchClick이라는 var에 내용을 채 웁니다. jquery에서 나는 간단하게 다음과 같이 호출한다 :

$('element').on(touchClick, function(e){ //do something }); 

매우 작은 설치 공간을 가지고있다.