鼠标按下时如何根据悬停在哪个单元格上更改 html 表格单元格的颜色？

Question

本质上，我希望用户能够单击并按住鼠标并滚动表格中任意数量的单元格，只要他们滚动一个单元格，它就会改变颜色。问题是，当用户经常单击一个单元格时，我希望该单元格改变颜色，并且我有一个单独的事件侦听器可以做到这一点。

这是我的 html 表格

<table class="c-table" onmousedown="hoverColorFill()">

这是我为尝试处理鼠标悬停情况而创建的 js 函数，我对此进行了描述：

function hoverColorFill(){
    elements = document.querySelectorAll(':hover');
    for(let i=0; i<elements.length; i++){
    elements[i].style.backgroundcolor = colorEl.value
       }
}

这是当有人简单地点击我的单元格时我拥有的代码：

table.addEventListener('click', (event) => {
  const rows = document.querySelectorAll('tr');
  const rowsArray = Array.from(rows);
  const rowIndex = rowsArray.findIndex(row => row.contains(event.target));
  const columns = Array.from(rowsArray[rowIndex].querySelectorAll('td'));
  const columnIndex = columns.findIndex(column => column == event.target);
  document.querySelector(".c-table").tBodies[0].rows[rowIndex-1].cells[columnIndex].style.backgroundColor = colorEl.value
})

hoverColorFill() 函数似乎不起作用，当我将鼠标拖到我的桌子上时，该函数被调用（它可以打印到控制台）但它不会改变颜色。我的单击事件侦听器功能完全正常，但它偶尔会出现此错误：未捕获的类型错误：无法在 HTMLTableElement 处读取未定义的属性（读取“样式”）。 但不工作的功能不会引发任何错误。

编辑：我在这里没有使用 eventListener 的原因是因为我无法弄清楚如何做到这一点，以便它同时关注悬停和鼠标悬停。

Answer 1

colorTd() 函数检查您是否点击了td，然后向其添加一个类
当您单击它时它会处于活动状态，或者当您单击它时拖动鼠标
onmousedown 和 onmouseup 会检查您是否在单击时拖动鼠标。它存储在mouseIsDown

当鼠标悬停在桌子上时（由 onmouseover 确定）并且当 mouseIsDown 是 true 时，colorTd() 函数将执行，给 tds 一个类

const table = document.querySelector("table");
const className = "selected";
let mouseIsDown = false;

const colorTd = (e) => (e.target.tagName = "TD" && e.target.classList.add("selected"));
table.onclick = (e) => colorTd(e);

document.onmousedown = (e) => {
  mouseIsDown = true;
  colorTd(e);
};

document.onmouseup = () => (mouseIsDown = false);
table.onmouseover = (e) => mouseIsDown && colorTd(e);

td {
  cursor: pointer;
  font-size: 22px;
}

td.selected {
  background-color: lightblue;
}

table::selection,
tr::selection,
td::selection {
  background-color: transparent;
}

<table>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

Answer 2

为单元格着色的代码看起来相当复杂。

这个 sn-p 只是给元素添加了一个类。

然而，记住鼠标何时按下确实需要更复杂一些，因此着色发生在 mousemove 上，并记住鼠标何时抬起。

up 和 down 事件可能发生在表格之外，因此可以在整个文档上感知。

此外，当鼠标向下移动时，浏览器中的默认设置通常是添加背景色（用户被认为是在进行选择）。这个 sn-p 将它设置为对表格透明，以便更容易看到正在发生的颜色。

const table = document.querySelector('table');
let mouseIsDown = false;
table.addEventListener('click', function() {
  event.target.classList.add('colorCell');
});
document.addEventListener('mousedown', function() {
  mouseIsDown = true;
  event.target.classList.add('colorCell');
})
document.addEventListener('mouseup', function() {
  mouseIsDown = false;
});
table.addEventListener('mouseover', function() {
  if (mouseIsDown) event.target.classList.add('colorCell');
});

td.colorCell {
  background-color: yellow;
}

table::selection,
tr::selection,
td::selection {
  background-color: transparent;
}

<table>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>