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

Asked 4/8, 2017 at 14:18 Answered 7/8, 2017 at 11:38

Solved javascript reactjs events preventdefault stoppropagation

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);
    }

Ailis answered 4/8, 2017 at 14:18 Comment(0)

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);
    }

Ailis answered 7/8, 2017 at 11:38 Comment(0)

If the issue is that the page gets selected with blue color, there is another approach to prevent selection.

Try this :

<body onselectstart="return false">

Kris answered 4/8, 2017 at 17:28 Comment(2)

But we cant completely remove that functionality. Here we only want to prevent that functionality only when we are resizing the div element. – Ailis 4/8, 2017 at 19:31

Have you tried this approach using addEventListener and removeEventListener?. I'm guessing you have a onDragStart or onMouseDown events and other events when the interaction ends like onDragEnd or onMouseUp. Another alternative you could try is GreenSock's Draggable tool greensock.com/draggable – Lupercalia 7/8, 2017 at 5:10

Try this pattern:

if (event.preventDefault){ 
  event.preventDefault();
} 
else { 
  event.returnValue = false; 
}

Fredrika answered 4/8, 2017 at 15:15 Comment(1)

Didnt work i have also added return false to mouse move function – Ailis 4/8, 2017 at 15:49

Recommended topics

Hot tags