Question

在我的反应应用程序中，我有一个表，我有这个事件处理用户调整列的大小。

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

此事件由拖拽句柄上的mouseDown触发，如此

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

我的问题是：我如何突破handleMouseDown函数？因为它在第一次mousedown之后始终保持活跃状态

Answer 1

首先，您将事件作为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;
    }
}

反应从鼠标按下事件中逃脱

1 个答案: