2021SC@SDUSC
Überblick
Im zehnten Kapitel haben wir begonnen, einige js-Dateien im Ereignis im Quark-Renderer zu analysieren, wobei wir hauptsächlich die Datei Eventful.js analysierten. JS ist die Hauptdatei für die Ereignisverarbeitung, und es gibt andere JS-Codes für die Ereignisverarbeitung. Dieses Mal werden wir andere JS zu Ereignissen analysieren.
DomEventInterceptor.js-Datei
Einführung
In diesem Dokument erfahren wir gemäß der Beschreibung des Autors, dass dieDomEventInterceptorDie Hauptfunktionen der Klasse sind: Native Ereignisse auf DOM-Tags abfangen, sie an Quark-Renderer -Instanzen weiterleiten undQuarkRendererEventHandlerDie Klasse verteilt das Ereignis weiter an die Elemente innerhalb der Leinwand. Die meisten DOM-Ereignisse, die weitergeleitet werden müssen, werden im äußeren Container-Div der Leinwand gemountet, wie zum Beispiel: click, dbclick, contextmenu usw.; einige DOM-Ereignisse werden direkt im Dokumentobjekt gemountet, wie zum Beispiel: Mousemove, Mouseout. Denn während des Ziehens und der Tastaturinteraktion hat der Mauszeiger möglicherweise den Bereich verlassen, in dem sich die Leinwand befindet.
setTouchTimer
Die Funktion dieser Methode besteht darin, zu verhindern, dass das Mausereignis nach dem Touch-Ereignis ausgelöst wird. In dieser Funktion wird die setTimeout-Methode aufgerufen. Diese Methode dient dazu, die Timing-Funktion so festzulegen, dass sie überschrieben werden kann. Bestimmte Browser (Safari, IE 8, PhantomJS) erfordern diesen Hack. Behandeln Sie in dieser Methode eine anonyme Funktion und vervollständigen Sie Scope.touching = false; Scope.touchTimer = null;
Bei der Verwendung der Ereignisverarbeitung müssen Sie auf diese beiden Punkte achten:
- Der mobile Browser löst das Mausereignis 300 ms nach der Berührung aus.
- Chrome auf Android löst das Mousedown-Ereignis etwa 650 ms nach dem langen Drücken aus. Das Endergebnis ist also: Mausereignisse für 700 ms deaktivieren.
function setTouchTimer(scope) {
scope.touching = true;
if (scope.touchTimer != null) {
clearTimeout(scope.touchTimer);
scope.touchTimer = null;
}
scope.touchTimer = setTimeout(function () {
scope.touching = false;
scope.touchTimer = null;
}, 700);
}
localDOMHandlers-Objekt
Dies ist ein Handler-Objekt, wobei sich „local“ auf den Bereich innerhalb des Canvas bezieht. Dieses Objekt verarbeitet einige Verarbeitungen im Zusammenhang mit der Maus, wie z. B. Mouseout, Touchstart, Touchmove, Touchend, Pointerdown, Pointermove, Pointerup, Pointerout und andere Vorgänge sowie die entsprechenden Verarbeitungsfunktionen. Lassen Sie uns diese im Folgenden separat besprechen:
Mouseout
Diese Methode ist die Funktion, die beim Herausziehen der Maus aufgerufen wird. Rufen Sie bei der Verarbeitung zunächst die normalizeEvent-Funktion von eventUtil auf. Die Funktion dieser Funktion besteht darin, die Koordinaten des Eingabeereignisses zu standardisieren. Wenn Sie das Mausrad verwenden, können Sie es abrufen e.qrDelta. Das Rückgabeergebnis dieser Funktion ist a{UIEvent}, das normalisierte native UIEvent. Verarbeiten Sie dann das Element und den Knotentyp in der Mouseout-Funktion, ignorieren Sie dabei den Mouseout, der durch den im Stamm enthaltenen Dom verursacht wird, und rufen Sie schließlich die Triggerfunktion auf, um Mouseout- und Ereignisereignisse zu übergeben. Die Methode trigger () kommt hierher das Mixin in Eventful Ja, wenn die Methode trigger() aufgerufen wird, wird das Ereignis innerhalb von QuarkRender, also innerhalb der Leinwand, ausgelöst. Der Zweck besteht hier darin, das empfangene HTML-Ereignis an die Innenseite des Canvas weiterzuleiten. Für die Trigger-Methode haben wir im vorherigen Abschnitt erfahren, dass eine Methode in eventfull.js zum Auslösen eines Ereignisses verwendet wird.
mouseout: function (event) {
event = eventUtil.normalizeEvent(this.dom, event);
let element = event.toElement || event.relatedTarget;
if (element !== this.dom) {
while (element && element.nodeType !== 9) {
if (element === this.dom) {
return;
}
element = element.parentNode;
}
}
this.trigger('mouseout', event);
},
Touchstart
Diese Funktion wird aufgerufen, wenn die Berührung beginnt. Sie ruft außerdem zu Beginn die Funktion normalizeEvent in eventUtil auf, um das Ereignis zu standardisieren. Das Standardverhalten der Maus sollte hier nicht deaktiviert werden. Beispielsweise muss die Seite möglicherweise verschoben werden. Rufen Sie dann eine markTouch-Funktion auf. Die Funktion dieser Funktion besteht darin, die Berührung zu markieren, wodurch zwischen Berührungs- und Mausereignissen unterschieden wird. Rufen Sie „processGesture“ auf, um die Geste zu verarbeiten, und rufen Sie dann „mousemove.cal“ und „mousemove.call“ auf. Die Funktion dieser Funktion besteht darin, die Ereignis-Listener des Touch-Geräts und des Mausgeräts konsistent zu machen. Wir simulieren „Mouseover–>Mousedown“ in der Berührung Gerät. Also feuern wir hier mousemove'(löst „Mouseover“ im Inneren aus) und lösen dann „Mousedown“ aus.
touchstart: function (event) {
event = eventUtil.normalizeEvent(this.dom, event);
markTouch(event);
this._lastTouchMoment = new Date();
this.handler.processGesture(event, 'start');
localDOMHandlers.mousemove.call(this, event);
localDOMHandlers.mousedown.call(this, event);
},
touchmove
Diese Funktion verarbeitet Berührungsbewegungen. In dieser Funktion muss das Ereignis zu Beginn standardisiert werden und dann auch aufgerufen werden, um markTouchdie Berührung zu markieren. Rufen Sie hier mousemove.call(this,event) auf, um hier die Mausbewegung zu erklären sollte immer ausgelöst werden, egal ob es sich um Gestrue-Ereignisse handelt, da Mausbewegung und Pinch gleichzeitig verwendet werden können.
touchmove: function (event) {
event = eventUtil.normalizeEvent(this.dom, event);
markTouch(event);
this.handler.processGesture(event, 'change');
localDOMHandlers.mousemove.call(this, event);
},
berührt
Diese Funktion behandelt die Dinge, die nach der Berührung behandelt werden sollen. Zunächst ist es auch der Aufruf von drei Funktionen, die jeweils das Ereignis standardisieren, dann die Markierung berühren, dann die Geste verarbeiten, sie als markieren und dann mouseup.call aufrufen , und beurteilen Sie dann die aktuelle Zeit abzüglich der endneuesten Zeit. Der Wert des späten Berührungsmoments wird mit der Berührungsverzögerung verglichen, obwohl mousemove( wird ausgelöst in , aber hier nicht auslösen mouseover. Es scheint unlogisch, aber mit diesem Mechanismus können wir es leicht tun Implementieren Sie den „Hover“-Stil auf PC- und Touch-Geräten. Hören Sie einfach zu, um „Hover-Stil“ hinzuzufügen, und hören Sie zu, um „Hover-Stil“ auf dem Element ohne zusätzlichen kompatiblen Code zu entfernen. ( Wird in „touchend“ nicht ausgelöst, also „hover style " verbleibt in der Benutzeransicht) Das Klickereignis sollte immer ausgelöst werden, unabhängig davon, ob ein Gesttrue-Ereignis vorliegt. Systemklicks können nicht blockiert werden.touchstartmouseoutmouseovermouseoutmouseout
touchend: function (event) {
event = eventUtil.normalizeEvent(this.dom, event);
markTouch(event);
this.handler.processGesture(event, 'end');
localDOMHandlers.mouseup.call(this, event);
if (+new Date() - this._lastTouchMoment < TOUCH_CLICK_DELAY) {
localDOMHandlers.click.call(this, event);
}
},
Zusammenfassen
Oben haben wir einige Methoden und Objekte in DomEventInterceptor.js kennengelernt. Alles in allem geht es in dieser Analyse hauptsächlich um die Analyse der Maus vom Einfahren bis zum Berühren und anschließenden Klicken. Es gibt noch einige, die noch nicht gelesen wurden. Das nächste Mal werden wir die restlichen Funktionen lernen.