evt.preventDefault在IE和Edge鼠标移动事件中不起作用,甚至尝试过evt.returnValue = false; 但没有阻止传播

Lab*_*beo 11 javascript events preventdefault stoppropagation reactjs

我有一个相当大的div.在尝试调整大小的同时,整个页面都被选中了蓝色,即使我不打算在iE和Edge中.我尝试过在网上显示的许多解决方案但没有任何效果.以下是我的代码.鼠标移动时,我无法阻止事件的默认操作.我正在监听ownerDocument上的鼠标移动事件.

下面的代码在chrome和mozilla中按预期工作

我在控制台中通过检查evt变量看到,在停止传播之前防止默认为真,停止传播后防止默认为false.与谷歌chromes行为相同,但仍然不明白为什么整页被选中

反应代码:

 <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);
    }
Run Code Online (Sandbox Code Playgroud)

Lab*_*beo 5

而不是制作evt.preventDefault(); 在鼠标移动中使其成为mousedown/Click事件本身

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);
    }
Run Code Online (Sandbox Code Playgroud)