Beispiel einer nativen Implementierung des FastClick-Ereignisses in js

Hinweis: Ich habe schon lange nicht mehr an mobilen Webseiten und WeChat-Anwendungen im Web gearbeitet, da ich in letzter Zeit ähnliche Funktionen wie Fastclick verwendet habe, um Touchstart- und Touchend-Ereignisse zu simulieren Ich versuche nun, sie im Originalprogramm zu verwenden. Die folgenden zwei problematischen Lösungen wurden erhalten. Teilen Sie es mit allen und bitten Sie die Experten um Rat.

Bei der Entwicklung mobiler Web-Apps führt die 300-ms-Verzögerung des Klickereignisses zu einer langsamen Reaktion, insbesondere bei Low-End-Maschinen. Die Verwendung von Touchstart- oder Touchend-Ereignissen führt zu Konflikten mit dem Standard-Wheel-Ereignis, was nicht das ist, was wir erwarten.

Also habe ich es selbst gemacht, hatte genug Essen und Kleidung und habe einen nativen JS-Code für schnelle Klickereignisse geschrieben (unter Berücksichtigung der Umgebung der Web-App-Entwicklung müssen wir die Kompatibilität mit Browsern nicht berücksichtigen wie z. B. IE vorerst).

Implementierungsmethode 1 ist wie folgt:

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;
};

Prinzip: Basierend auf der Positionsänderung, wenn kontinuierliche Touchstart- und Touchend-Ereignisse auftreten, Bestimmen Sie, ob es sich um einen One-Click-

-Aufruf handelt: Verwenden Sie eine Handlerfunktion, um ein FastClickEvent-Ereignis zu registrieren. Binden Sie dann das registrierte FastClickEvent-Ereignis über die Bindungsmethode an das entsprechende Element. Wie folgt:

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

In diesem Code registrieren wir das Fastclick-Handler-Ereignis für alle div-Elemente. Rufen Sie fastClick.unbind auf, um die Bindung eines Elements aufzuheben.

Aber es gibt ein Problem mit diesem Code, damit das handleEvent-Ereignis auf touchX, touchY zugreifen kann. Ich habe eine Abschlussmethode verwendet, was bedeutet, dass jedes Mal, wenn ein neues FastClickEvent-Ereignisobjekt erstellt wird, eine wiederholte handleEvent-Funktion in den Speicher eingefügt werden muss. Was die wiederholten Berührungen „TouchX“ und „TouchY“ angeht, ist es nicht nötig, mehr zu sagen.

Hilfe für Neulinge: Ich wollte ursprünglich die handleEvent-Funktion in den Prototyp schreiben, aber ein Problem besteht darin, dass dieses Objekt von handleEvent (Ereignis) Windows ist, das heißt, ich kann touchX nicht bekommen, touchY- und Handler-Objekte, was zu Zugriffsfehlern führt.

Es gibt eine relativ einfache Lösung, die darin besteht, nur ein fastClickEvent-Ereignis zu registrieren und dann den Antwortinhalt im Handler basierend auf dem tatsächlichen Wert von event.target (d. h. dem Objekt, in dem das Ereignis auftritt) zu bestimmen ).

Das bedeutet jedoch, dass Sie mit allen Fastclick-Events bestens vertraut sein müssen.

Der Vorteil dieser Methode besteht darin, dass Sie vor der Veröffentlichung der Seite grundsätzlich nur eine handleEvent-Funktion haben und die Bindung nicht aufheben müssen, es sei denn, Sie möchten das Fastclick-Ereignis nicht erneut auslösen jedes Element. Fastclick-Ereignis (auch wenn Sie die Bindung aufheben, ist die Handlerfunktion weiterhin im Speicher vorhanden). Darüber hinaus können Sie bind(query) ganz einfach verwenden, um das Fastclick-Ereignis eines beliebigen dynamisch generierten Elements hinzuzufügen, sofern Sie den entsprechenden Handler in der Handler-Funktion geschrieben haben.

Wenn Sie mehrere FastClick-Ereignisse hinzufügen möchten und diese möglicherweise an mehreren Stellen registrieren müssen, müssen Sie nur ein neues FastClickEvent-Objekt erstellen und es an das entsprechende Element binden.

Als Nächstes wird eine Methode zur Verwendung der EventTarget-Klasse vorgestellt. Werfen wir zunächst einen Blick auf die Klasse 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);
    }
  }
}

, eine Schnittstelle zum Hinzufügen, Entfernen und Implementieren benutzerdefinierter Klassen. Siehe „JavaScript Advanced Programming Third Edition“ P616-617

Wie kann ich diese Klasse also in unsere FastClick-Ereignisschnittstelle umwandeln?

Definieren Sie eine globale Variable und verwenden Sie diese Variable, um alle Registrierungen, Löschungen und Hinzufügungen von FastClick-Ereignissen abzuschließen.

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;
}();

Diese globale Variable kann FastClick kann verwendet werden, um beliebige Fastclick-Ereignisse hinzuzufügen.

Lassen Sie uns darüber sprechen, wie man es nennt.

Ereignisfunktion hinzufügen:

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

Ereignisfunktion löschen: //Anonyme Ereignisse können nicht gelöscht werden

FastClick.removeHandler('fastclick',handler);

Element binden

FastClick.bind("div");

Unbind

FastClick.unbind("div");

Mit dieser Methode müssen wir auch event.target im Handler-Ereignis vorhersagen, denn obwohl diese Methode mehrere Fastclick-Ereignisse hinzufügen kann, werden die Ereignisse einzeln ausgeführt eine nacheinander während der Ausführung, d. h. Funktionen, die Sie nicht ausführen möchten, können ausgeführt werden. Der Vorteil von

besteht darin, dass Sie mehrere Fastclick-Ereignisse registrieren und ausführen können, ohne sie erneut zu binden.
Zum Beispiel:

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

Wenn dann ein schnelles Klickereignis für ein beliebiges div-Element auftritt, werden Handler1 und Handler2 nacheinander ausgeführt.

Wenn wir RemoveHandler aufrufen, um Handler1 oder Handler2 zu löschen, wird die entsprechende Funktion nicht mehr ausgeführt.

Außerdem ist zu beachten, dass dieses Objekt in der Handlerfunktion das Array FastClick.handlers['fastclick'] ist. Im Allgemeinen verwenden wir event.target, um das Objekt abzurufen, bei dem das Ereignis aufgetreten ist.

Die Verwendung dieser Methode überwindet grundsätzlich die Probleme der oben genannten Methode. Darüber hinaus ist die Wiederholung von „new“ für dieses Objekt nicht sehr sinnvoll, es sei denn, Sie möchten nicht das Ereignis „event.target“ vorhersagen und viele FaskClicks-Klassen generieren , aber das ist offensichtlich ineffizient.

Hilfe für Neulinge: Wie kann ich eine Bindungsausführungsfunktion für ein bestimmtes Element implementieren, das heißt: Ich kann FastClick.bind(query,handler); aufrufen, um das Fastclick-Ereignis zum Hinzufügen eines Handlers zu Elementen zu implementieren die Abfragebedingungen erfüllen.