problem description
dispatchEvent takes a long time to propagate mousedown events.
ele1.addEventListener("mousedown", dispatch);
function dispatch(e){
console.log(new Date().getTime()); // time1
var event = new e.constructor(e.type, e);
ele2.dispatchEvent(event);
console.log(new Date().getTime()); // time2
}time2-time1 is proportional to the number of elements, and the more elements, the higher the value, the higher the delay in firing mousedown events. Up to a few thousand milliseconds.
the environmental background of the problem
there are three parallel div layers, the outermost layer is the mask layer, the middle layer is the presentation layer, and the innermost layer is the event layer. The mask listens for mouse events, receives them and distributes them to the innermost layer using dispatchEvent. However, when there are many elements in the middle layer, there will be a high delay for mousedown events on the mask layer to call dispatchEvent propagation. The more middle-tier elements, the more time dispatchEvent takes and the higher the latency. The middle layer is not involved in event propagation.
--
After thinking about it for a long time, I didn"t understand it. I asked the boss for an answer. By the way, only mousedown has this problem, not even, mousemove, mousein, mouseout!-- Update
this problem occurs only when the innermost layer is Amap, and there is no such problem in normal div.