Javascript 从鼠标按下事件中做出反应

在我的react应用程序中，我有一个表，其中有一个事件，该事件处理按用户调整列大小

handleMouseDown(e) {
        event.preventDefault();
        let leftCol = e.target.parentElement
        let rightCol = e.target.parentElement.nextSibling
        let leftColOffset = leftCol.offsetWidth - e.pageX
        let rightColOffset = rightCol.offsetWidth + e.pageX
        onmousemove = (event) => {
            leftCol.style.width = leftColOffset + event.pageX + 'px';
            rightCol.style.width = rightColOffset - event.pageX + 'px';
            onmouseup = () => {
                onmousemove = null
            }
        }
        onmouseup = () => {
            //here i need somenthing that would break me out of parent function
        }
    }

此事件由拖动手柄上的鼠标向下触发，如下所示

<div class="resizeGrip" onMouseDown={this.handleMouseDown}></div>

---

我的问题是：如何打破handleMouseDown函数？因为在第一次鼠标向下移动后，它始终保持活动状态，所以在将事件作为e传递给函数的第一件事中，您必须执行

e.preventDefault（）

而不是

event.preventDefault

。这里，您的mousedown事件由

e

其次，不需要在onMouseMove中监听onMouseUp，下面的代码应该可以帮助您-

handleMouseDown(e) {
    e.preventDefault();
    let leftCol = e.target.parentElement
    let rightCol = e.target.parentElement.nextSibling
    let leftColOffset = leftCol.offsetWidth - e.pageX
    let rightColOffset = rightCol.offsetWidth + e.pageX
    onmousemove = (event) => {
        leftCol.style.width = leftColOffset + event.pageX + 'px';
        rightCol.style.width = rightColOffset - event.pageX + 'px';
    }
    onmouseup = () => {
        onmousemove = null;
    }
}

---

谢谢，就这样：）