在 JavaScript 中组合鼠标事件

Question

我正在尝试使用 javascript 构建一个类似 Paint 的 Web 应用程序。用户应该能够用鼠标在像素网格上“绘制”形状。我怎样才能使用 DOM 事件监听器来实现这个工作？

通过这一行，用户可以一一设置单个像素：

td.addEventlistener("click", setpixel);

所以我想我必须将 mousedown 和 mouseover 结合在一个事件侦听器中。那可能吗？

Answer 1

您本身无法组合事件侦听器。但您可以使用多个侦听器来跟踪光标的状态。

var mouseIsDown = false
el.addEventListener('mousedown', function(){mouseIsDown = true})
el.addEventListener('mouseup', function(){mouseIsDown = false})

然后您需要决定当鼠标移动时要做什么。

el.addEventListener('mousemove', function(){
    if(mouseIsDown){
        // implement drawing logic here
    }
})