丢失mouseup事件

丢失mouseup事件

July 9, 2022

Question #

处理拖拽事件事件需要将mousedown, mousemove, mouseup三者整合起来，下面的JavaScript代码框架有何隐患，应如何解决？

this.root.addEventListener('mousedown', event => {
    console.log('mousedown')
    let move = event => {
        console.log('mousemove')
    }
    let up = event => {
        console.log('mouseup')
        this.root.removeEventListener('mousemove', move)
        this.root.removeEventListener('mouseup', up)
    }
    this.root.addEventListener('mousemove', move)
    this.root.addEventListener('mouseup', up)
})

Answer #

在控件上按下鼠标按键，然后拖动鼠标到控件以外，再松开按键，这时mouseup 事件会丢失，移动光标到控件上，不必按下按键，mousemove事件仍旧会被触发。解决方案是用document来监听事件，这么做后，即使移动光标到浏览器外，仍旧可以监听事件。mousedown事件仍旧由控件监听。

this.root.addEventListener('mousedown', event => {
    console.log('mousedown')
    let move = event => {
        console.log('mousemove')
    }
    let up = event => {
        console.log('mouseup')
        document.removeEventListener('mousemove', move)
        document.removeEventListener('mouseup', up)
    }
    document.addEventListener('mousemove', move)
    document.addEventListener('mouseup', up)
})

Viewpoint #

From #