evt.preventDefault is not working in IE and Edge on mouse move event, even tried evt.returnValue = false; but didn't work to stop propagation

Question

I have a re sizable div. While trying to resize it the whole page is getting selected with blue color even though I didn't intend to in iE and Edge. I have tried many solutions shown on web but nothing worked. Below is my code. I am unable to prevent default action by event on mouse move. I am listening on ownerDocument for mouse move event.

Below code is working as expected in chrome and mozilla

I have seen in console by inspecting in evt variable, before stop propagation prevent default is true, after stop propagation prevent default is false. Same as google chromes behavior but still dont get why is whole page getting selected

React Code:

 <div className="resizer"
      tabIndex={-1}
      onMouseDown={this.MouseDown}
 />


private MouseDown(evt: any) {
        this.viewState.resizing = true;
        const {ownerDocument} = ReactDOM.findDOMNode(this);
        ownerDocument.addEventListener('mousemove', this.MouseMove);
        ownerDocument.addEventListener('mouseup', this.MouseUp);

        this.setState(this.viewState);
    }

private MouseMove(evt) {
        this.viewState.width = width;
        this.viewState.height = height;


         if (evt.preventDefault) {
            evt.returnValue = false;
            evt.preventDefault();
        }
        else {
            evt.cancelBubble = true;
        }


        this.setState(this.viewState);
    }

Answer 1

Instead of making evt.preventDefault(); in mouse move make it in mousedown/Click event itself

private MouseDown(evt: any) {
        this.viewState.resizing = true;
        const {ownerDocument} = ReactDOM.findDOMNode(this);
        evt.preventDefault();
        evt.stopPropagation();
        ownerDocument.addEventListener('mousemove', this.MouseMove);
        ownerDocument.addEventListener('mouseup', this.MouseUp);

        this.setState(this.viewState);
    }