Menu
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);
}
272
The preventDefault() method of the Event interface tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.
The event. preventDefault() will not allow the user to leave the page and open the URL. The event. stopPropagation() method stops the propagation of an event from occurring in the bubbling or capturing phase.
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);
}
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">
Try this pattern:
if (event.preventDefault){
event.preventDefault();
}
else {
event.returnValue = false;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
