javascript - 当鼠标按下时，如何根据鼠标悬停在哪个单元格上更改 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 处未定义的属性(读取“样式”)。 但不工作的函数不会抛出任何错误。

编辑:我在这里没有使用事件监听器的原因是因为我不知道如何做到这一点，以便它同时关注悬停和鼠标悬停。

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>