2021SC@SDUSC
Overview
In the tenth chapter, we started to analyze some js files in the event in quark-renderer, mainly analyzing the Eventful.js file. The js is the main file for event processing, and there are other js codes for event processing. This time we will analyze other js about events.
DomEventInterceptor.js file
Introduction
In this document, according to the author's description, we learn that theDomEventInterceptorThe main functions of the class are: intercept native events on DOM tags, forward them to Quark-Renderer instances, andQuarkRendererEventHandlerThe class will further distribute the event to the elements inside the canvas. Most of the DOM events that need to be forwarded are mounted on the outer container div of the canvas, such as: click, dbclick, contextmenu, etc.; a few DOM events are directly mounted on the document object, such as: mousemove, mouseout. Because in the process of dragging and keyboard interaction, the mouse pointer may have left the area where the canvas is located.
setTouchTimer
The function of this method is to prevent the mouse event from being triggered after the Touch event. The setTimeout method is called in this function. This method is to set the timing function so that it can be overwritten. Certain browsers (Safari, IE 8, phantomjs) require this hack. In this method, handle an anonymous function and complete scope.touching = false; scope.touchTimer = null;
When using event processing, you need to pay attention to these two points:
- The mobile browser will dispatch the mouse event 300ms after the touch.
- Chrome on Android dispatches the mousedown event about 650ms after the long press. So the end result is: disable mouse events for 700ms.
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 object
This is a handler object, where local refers to the area inside the Canvas. This object handles some processing related to the mouse, such as mouseout, touchstart, touchmove, touchend, pointerdown, pointermove, pointerup, pointerout and other operations, as well as their corresponding processing functions. Let’s discuss them separately below:
mouseout
This method is the function called when the mouse is moved out. When processing, first call the normalizeEvent function of eventUtil. The function of this function is to standardize the coordinates of the input event. If you use the mouse wheel, you can get it e.qrDelta. The return result of this function is a{UIEvent}, the normalized native UIEvent. Then process the element and nodeType in the mouseout function, while ignoring the mouseout caused by the dom contained in the root, and finally call the trigger function of this to pass in the mouseout and event events. The trigger() method here comes in from the mixin in Eventful Yes, when the trigger() method is called, the event is triggered inside QuarkRender, that is, inside the canvas. The purpose here is to forward the received HTML event to the inside of the canvas. For the trigger method, we have learned in the previous section that a method in eventfull.js is used to trigger an event.
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
This function is the function called when the touch starts. It also calls the normalizeEvent function in eventUtil at the beginning to standardize the event. The default mouse behavior should not be disabled here. For example, the page may need to be slid. Then call a markTouch function, the function of this function is to mark the touch, which distinguishes between touch and mouse events. Call processGesture to handle the gesture, and then call mousemove.cal and mousemove.call. The function of this function is to make the event listeners of the touch device and the mouse device consistent. We simulate "mouseover–>mousedown" in the touch device. So we fire here mousemove'(triggers mouseover' inside), and then fires `mousedown'.
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
This function handles touch movement. In this function, the event needs to be standardized at the beginning, and then it also needs to be called to markTouchmark the touch, call mousemove.call(this,event), here to explain, the mouse movement should always be triggered, no matter whether it is There are gestrue events because mousemove and pinch may be used at the same time.
touchmove: function (event) {
event = eventUtil.normalizeEvent(this.dom, event);
markTouch(event);
this.handler.processGesture(event, 'change');
localDOMHandlers.mousemove.call(this, event);
},
touched
This function handles the things that should be handled after the touch. At first, it is also the call of three functions, which standardize the event respectively, then touch the mark, then process the gesture, mark it as, then call mouseup.call, and then judge the current time minus the endlatest The value of the late touch moment is compared with the touch delay, although mousemove( is triggered in , but don't trigger it here mouseover. It seems illogical, but with this mechanism, we can easily implement "hover" on PC and touch devices style", just listen to add "hover style" and listen to remove "hover style" on the element, without any additional compatible code. ( Will not be triggered in `touchend', so "hover style " will Remains in the user view) The click event should always be fired regardless of whether there is a gesttrue event. System clicks cannot be blocked.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);
}
},
Summarize
Above we have learned some methods and objects in DomEventInterceptor.js. All in all, this analysis is mainly about the analysis of the mouse from moving in to touching and then clicking. There are still some that have not been read. Next time we will learn the remaining functions.