When imitation Taobao magnifying glass effect, has been found to mask layer jitter, add the red box onmousemove events, internal uses offsetX final solution is to add css property to mask: pointer-event: none;
<div class="outer"> <div.mask></div> </div>
Originally, I wanted to let outer reference system and obtain the value offsetX offsetY, so the onmousemove incident response function is added to the outer, but do so only on behalf of, the event bubbling to the outer layer will execute the callback function, not a frame of reference offsetX outer, in fact event.offsetX is event.target (node event-triggered) as a frame of reference, it is useless to add the event to anyone, event-triggered frame of reference is always the node,
In this example, because the mask is a child of the red outer box, the trigger event node must be in the mask, the reference system is always a mask.
Adding to mask css attribute pointer-event: none; let the mask layer can not participate mouse events, such event.target is the outer, outer frame of reference before they can become