是否有鼠标事件-“单击并拖动元素”？

Question

所以实际上我正在创建一个基本级别的草图框，当单击鼠标并将其拖过多个元素（div）时，它们的颜色会发生变化。

我已经能够创建以下效果：(1) 鼠标悬停在（使用 mouseover 事件）元素上和 (2) 单击元素（使用 mousedown 事件）时颜色会发生变化。但是这两种方法都有问题，因为使用鼠标悬停会带来无法中断着色的问题（所有悬停的元素都会变色），而使用鼠标按下的问题是点击太多。

所以我正在寻找一种方法，如果我单击然后将鼠标拖到几个 div 上，那么所有这些 div 都应该是彩色的。因此关于相同的想法。

const n = +(prompt('Enter a number between 1 and 100'));
const sketchArea = document.querySelector('.sketchArea');

**function addColor(e){
    console.log(e.target);
    e.target.classList.add('black');
}**

for(let i=0;i<(n*n);i++){
    const div = document.createElement('div');
    div.classList.add('box');
    **//div.addEventListener('mousedown',addColor)
    //div.addEventListener('mouseover',addColor)**
    sketchArea.appendChild(div);
}

sketchArea.setAttribute('style', `grid-template-columns: repeat(${n},1fr); grid-template-rows:repeat(${n},1fr);`);

这是javascript文件。在这里，我创建了一个 n*n（使用提示获取的输入）div 的草图区域，并为每个 div 添加了事件侦听器，以便在事件发生时它们的颜色会发生变化。