Prevent mouse pointer events interfering with simulated events

Question

I am trying to simulate mouse events to perform an action in the DOM like making a selection by moving the pointer from point A to pointer B. Here is an example of the event that I am using.

const start = {
    clientX: start.left + 1,
    clientY: start.top + start.height / 2,
    bubbles: true,
    shiftKey: false,
};

const end = {
    clientX: end.right,
    clientY: end.bottom - end.height / 2,
    bubbles: true,
    shiftKey: false,
};

target.dispatchEvent(new MouseEvent('mousedown', end));
target.dispatchEvent(new MouseEvent('mousemove', start));
target.dispatchEvent(new MouseEvent('mouseup', start));

This makes a selection on the target element. This works fine but if the user moves their mouse during this brief period, the user's cursor's mouse events interfere with the simulated events and the selection messes up.

I have tried using element.requestPointerLock() but this shows an info bubble on the screen until I release the pointer lock.

Is there a way to prevent user's pointer events from interfering with the simulated event (events dispatched from the code)?