Javascript 为什么mouseup事件会触发我的mousedown事件？

我一直在从事的蚀刻草图项目，在实现

mousedown

和

mouseup

事件侦听器时遇到了一些奇怪的行为

我在一个容器div中创建了一个50x50的div网格。容器div监听

mousedown

事件，在此事件上调用

startDrawing

函数，填充用户悬停的框。它还侦听

mousedown

事件，以便在释放鼠标时调用

stopDrawing

函数并停止填充框

所有这一切都很好，但是有时候，当我按住鼠标左键开始画一条线时，box div变为“抓取”。之后，在按住鼠标左键的同时拖动鼠标，当鼠标悬停在框上时，框不会被填充。然后，当我松开鼠标时，它开始绘图。这就像是在意外的“抓取”之后切换了行为，但在下一次鼠标向下移动时，它又开始正常工作

这可能比亲自去看更难解释，所以下面是我的代码以及相应代码笔的链接

我曾尝试通过谷歌搜索来找出如何消除这种“抓取”行为，但我没有真正找到任何东西，可能是因为我甚至不知道要搜索什么关键字

有人能解释一下发生了什么，并提供一些我如何解决这个问题的信息吗

const GRID\u SIZE=50；
for（设i=0；ibox.classList.remove（'filled'）；
}
函数startDrawing（）{
//控制台日志（“开始绘图”）；
const-box=document.queryselectoral（'.box'）；
forEach（box=>box.addEventListener（'mouseover'，fillBox））；
}
函数stopDrawing（）{
//控制台日志（“停止绘图”）；
const-box=document.queryselectoral（'.box'）；
forEach（box=>box.removeEventListener（'mouseover'，fillBox））；
}
const container=document.querySelector（“#container”）；
container.addEventListener（'mousedown'，startDrawing）；
container.addEventListener（'mouseup'，stopDrawing）；
const button=document.querySelector（“#清除网格btn”）；
button.onclick=clearGrid
#容器{
宽度：500px；
显示：网格；
网格模板列：重复（50，10px）；
网格模板行：重复（50，10px）；
边框：实心；
边框颜色：黑色；
保证金：自动；
}
.盒子{
宽度：10px；
高度：10px；
}
.box:悬停{
背景颜色：蓝色；
}
.填充{
背景颜色：蓝色；
}
#清除网格btn{
显示：块；
保证金：自动；
边缘顶部：10px；
}

文件
清除网格
这里发生的是mousedown+mousemove的默认行为是启动抓取。

当然，在某个时候，浏览器会选择页面中的某些内容并开始抓取它

避免这种情况的解决方案是告诉浏览器您的代码确实处理了事件，因此不应执行其常规行为。可以通过调用以下方法执行此操作：


const GRID\u SIZE=50；
for（设i=0；ibox.classList.remove（'filled'）；
}
功能开始绘图（evt）{
evt.preventDefault（）；//告诉浏览器我们处理该事件
//控制台日志（“开始绘图”）；
const-box=document.queryselectoral（'.box'）；
forEach（box=>box.addEventListener（'mouseover'，fillBox））；
}
功能停止绘图（evt）{
evt.preventDefault（）；//告诉浏览器我们处理该事件
//控制台日志（“停止绘图”）；
const-box=document.queryselectoral（'.box'）；
forEach（box=>box.removeEventListener（'mouseover'，fillBox））；
}
const container=document.querySelector（“#container”）；
container.addEventListener（'mousedown'，startDrawing）；
container.addEventListener（'mouseup'，stopDrawing）；
const button=document.querySelector（“#清除网格btn”）；
button.onclick=clearGrid
#容器{
宽度：500px；
显示：网格；
网格模板列：重复（50，10px）；
网格模板行：重复（50，10px）；
边框：实心；
边框颜色：黑色；
保证金：自动；
}
.盒子{
宽度：10px；
高度：10px；
}
.box:悬停{
背景颜色：蓝色；
}
.填充{
背景颜色：蓝色；
}
#清除网格btn{
显示：块；
保证金：自动；
边缘顶部：10px；
}

文件
清除网格
太棒了，非常感谢！不过，我不明白的是，大多数情况下，抓取根本就没有启动。那么，为什么在某些情况下会“随机”发生呢？