js에서 FastClick 이벤트의 기본 구현 예

참고: 저는 오랫동안 JavaScript를 배우지 않았습니다. 최근에는 웹에서 모바일 웹 페이지 및 WeChat 애플리케이션 작업을 하고 있기 때문에 touchstart 및 touchend 이벤트를 사용하여 시뮬레이션했습니다. 이제 캡슐화를 사용하려고 하는데 다음 두 가지 문제 해결 방법을 얻었습니다. 모두와 공유하고 전문가에게 조언을 구하세요

모바일 웹 앱 개발 시 클릭 이벤트가 300ms 지연되면 특히 저사양 기기에서는 응답 속도가 느려집니다. touchstart 또는 touchend 이벤트를 사용하면 기본 휠 이벤트와 충돌이 발생하는데 이는 우리가 예상한 것과 다릅니다.

그래서 제가 직접 해봤고, 음식과 옷도 충분하고, 빠른 클릭 이벤트를 위한 네이티브 js 코드도 작성했습니다(웹앱 개발 환경을 고려하면 브라우저와의 호환성을 고려할 필요가 없습니다). 당분간은 IE와 같은).

구현방법 1은 다음과 같습니다.

function FastClickEvent(handler){
  var fastclick = {
    handler : handler,
    bind : function(query){
      var targetList = document.querySelectorAll(query);
      for(var i=0,len=targetList.length;i<len;i++)
      {
        targetList[i].addEventListener(&#39;touchstart&#39;,handleEvent);
        targetList[i].addEventListener(&#39;touchend&#39;,handleEvent);
      }
    },
    unbind : function(query){
      var targetList = document.querySelectorAll(query);
      for(var i=0,len=targetList.length;i<len;i++)
      {
        targetList[i].removeEventListener(&#39;touchstart&#39;,handleEvent);
        targetList[i].removeEventListener(&#39;touchend&#39;,handleEvent);
      }
    } 
  }
  var touchX = 0 ,touchY = 0;
 
  function handleEvent(event){
    switch(event.type)
    {
      case &#39;touchstart&#39;:
        touchX = event.touches[0].clientX;
        touchY = event.touches[0].clientY;
        break;
      case &#39;touchend&#39;:
        var x = event.changedTouches[0].clientX;
        var y = event.changedTouches[0].clientY;
        if(Math.abs(touchX-x)<5||Math.abs(touchY-y)<5)
          fastclick.handler(event);
        break;
    }
  };
 
  return fastclick;
};

원리: 연속적인 touchstart 및 touchend 이벤트 발생 시 위치 변화를 기준으로, 원클릭

호출인지 확인: 핸들러 함수를 사용하여 FastClickEvent 이벤트를 등록합니다. 그런 다음 등록된 FastClickEvent 이벤트를 바인딩 메소드를 통해 해당 요소에 바인딩합니다. 다음과 같습니다:

var handler = function(event){
  console.log(event.target.id+" fastclicked");
}
var fastClick = new FastClickEvent(handler);
fastClick.bind("div");

이 코드에서는 모든 div 요소에 대해 fastclick 핸들러 이벤트를 등록합니다. 요소 바인딩을 해제하려면 fastClick.unbind를 호출하세요.

그러나 이 코드에는 문제가 있습니다. handlerEvent 이벤트가 touchX, touchY에 액세스하도록 허용하는 것입니다. 나는 클로저 메소드를 사용했는데, 이는 새로운 FastClickEvent 이벤트 객체가 생성될 때마다 반복되는 handlerEvent 함수가 메모리에 주입되어야 함을 의미합니다. touchX와 touchY가 반복되는 부분은 더 말할 필요가 없습니다.

초보자를 위한 도움말: 원래는 프로토타입에 handlerEvent 함수를 작성하고 싶었지만 문제가 발생했습니다. 이 handlerEvent(이벤트) 개체가 Windows라는 것입니다. 즉, touchX를 가져올 수 없습니다. touchY 및 핸들러 개체로 인해 액세스 오류가 발생합니다.

fastClickEvent 이벤트를 하나만 등록한 다음 event.target의 실제 값(즉, 이벤트가 발생한 개체)을 기반으로 핸들러의 응답 내용을 결정하는 비교적 간단한 해결 방법이 있습니다. ).

그러나 이는 모든 fastclick 이벤트에 대해 매우 잘 알고 있어야 함을 의미합니다.

이 방법을 사용하면 기본적으로 하나의 handlerEvent 함수만 있으므로 페이지가 해제되기 전에 fastclick 이벤트를 다시 트리거하지 않으려는 경우 바인딩을 해제할 필요가 없다는 것입니다. 모든 요소. fastclick 이벤트(바인딩을 해제하더라도 핸들러 함수는 여전히 메모리에 존재합니다.) 또한 핸들러 함수에 해당 핸들러를 작성했다면 바인딩(쿼리)을 사용하여 동적으로 생성된 요소의 fastclick 이벤트를 쉽게 추가할 수 있습니다.

여러 개의 fastclick 이벤트를 추가하고 이를 여러 위치에 등록해야 하는 경우 새 FastClickEvent 객체를 생성하고 해당 요소에 바인딩하기만 하면 됩니다.

다음으로 EventTarget 클래스를 사용하는 방법을 소개합니다. 먼저, 사용자 정의 클래스를 추가, 제거, 구현하는 데 사용되는 인터페이스인 EventTarget

function EventTarget(){
  this.handlers = {};
}
EventTarget.prototype = {
  constructor: EventTarget,
  addHandler : function(type,handler){
    if(typeof this.handlers[type] == "undefined"){
      this.handlers[type]=[];
    }
    this.handlers[type].push(handler);
  },
  fire : function(event){
    if(!event.target){
      event.target = this;
    }
    if(this.handlers[event.type] instanceof Array){
      var handlers = this.handlers[event.type];
      for(var i=0,len=handlers.length;i<len;i++){
        handlers[i](event);
      }
    }
  },
  removeHandler : function(type,handler){
    if(this.handlers[type] instanceof Array){
      var handlers = this.handlers[type];
      for(var i=0,len=handler.length;i<len;i++){
        if(handlers[i]==handler){
          break;
        }
      }
      handlers.splice(i,1);
    }
  }
}

클래스를 살펴보겠습니다. "JavaScript 고급 프로그래밍 제3판" P616-617

을 참조하세요. 그러면 이 클래스를 어떻게 fastclick 이벤트 인터페이스로 바꿀 수 있을까요?

전역 변수를 정의하고 이 변수를 사용하여 모든 fastclick 이벤트 등록, 삭제, 추가를 완료합니다.

var FastClick = function(){
 
  var fastclick = new EventTarget(),
    touchX = 0 ,
    touchY = 0;
 
  function handleEvent(event){
    switch(event.type)
    {
      case 'touchstart':
        touchX = event.touches[0].clientX;
        touchY = event.touches[0].clientY;
        break;
      case 'touchend':
        var x = event.changedTouches[0].clientX;
        var y = event.changedTouches[0].clientY;
        if(Math.abs(touchX-x)<5||Math.abs(touchY-y)<5)
          fastclick.fire({type:&#39;fastclick&#39;,target:event.target});
        break;
    }
  };
  fastclick.bind = function(query)
  {
    var targetList = document.querySelectorAll(query);
    for(var i=0,len=targetList.length;i<len;i++)
    {
      targetList[i].addEventListener(&#39;touchstart&#39;,handleEvent);
      targetList[i].addEventListener(&#39;touchend&#39;,handleEvent);
    }
  }
 
  Fastclick.unbind = function(query){
    var targetList = document.querySelectorAll(query);
    for(var i=0,len=targetList.length;i<len;i++)
    {
      targetList[i].removeEventListener(&#39;touchstart&#39;,handleEvent);
      targetList[i].removeEventListener(&#39;touchend&#39;,handleEvent);
    }
  }
  return fastclick;
}();

이 전역 변수 FastClick은 임의의 fastclick 이벤트를 추가하는 데 사용됩니다.

호칭하는 방법에 대해 이야기해보겠습니다.

이벤트 함수 추가:

FastClick.addHandler('fastclick',function(event){});

이벤트 함수 삭제: //익명 이벤트는 삭제할 수 없습니다

FastClick.removeHandler('fastclick',handler);

요소 바인딩

FastClick.bind("div");

바인딩 해제

FastClick.unbind("div");

이 방법을 사용하면 핸들러 이벤트에서 event.target도 예측해야 합니다. 이 방법은 여러 개의 fastclick 이벤트를 추가할 수 있지만 이벤트는 하나씩 실행되기 때문입니다. 즉, 실행하고 싶지 않은 기능이 실행되는 동안 순차적으로 실행될 수 있습니다.

의 장점은 여러 개의 fastclick 이벤트를 등록하고 다시 바인딩하지 않고도 실행할 수 있다는 것입니다.
예를 들어

FastClick.bind("div");
FastClick.addHandler(handler1);
FastClick.addHandler(handler2);

그러면 임의의 div 요소에서 빠른 클릭 이벤트가 발생하면 handler1과 handler2가 순차적으로 실행됩니다.

removeHandler를 호출하여 handler1이나 handler2를 삭제하면 해당 함수는 더 이상 실행되지 않습니다.

또한 핸들러 함수에서 이 개체는 FastClick.handlers['fastclick'] 배열이라는 점에 유의해야 합니다. 일반적으로 이벤트가 발생한 개체를 얻기 위해 event.target을 사용합니다.

이 방법을 사용하면 기본적으로 위 방법의 문제가 해결됩니다. 또한, event.target을 예측하고 FaskClicks 클래스를 많이 생성하지 않는 한 이 개체에 대해 new를 반복하는 것은 의미가 없습니다. , 그러나 이것은 분명히 비효율적입니다.

초보자를 위한 도움말: 특정 요소에 대한 바인딩 실행 기능을 구현하는 방법은 다음과 같습니다. 즉, FastClick.bind(query,handler)를 호출하여 요소에 핸들러를 추가하는 fastclick 이벤트를 구현할 수 있습니다. 쿼리 조건을 충족합니다.