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

Question

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

这是我在 html

中的 table

<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() 函数似乎不起作用，当我将鼠标拖到我的 table 上时，该函数被调用（它可以打印到控制台）但它不会改变颜色.我的点击事件侦听器功能完全正常，但偶尔会出现此错误：Uncaught TypeError: Cannot read properties of undefined (reading 'style')at HTMLTableElement。但是不起作用的函数不会抛出任何错误。

编辑：我在这里没有使用 eventListener 的原因是因为我不知道该怎么做才能同时关注悬停和鼠标悬停。

Answer 1

给单元格着色的代码似乎很复杂。

此代码段只是向元素添加 class。

然而，记住鼠标按下的时间确实需要稍微复杂一些，因此着色将发生在 mousemove 上，并记住鼠标何时弹起。

向上和向下事件可能发生在 table 之外，因此会在整个文档中检测到。

此外，当鼠标处于按下状态时移动鼠标时，浏览器中的默认设置通常是添加背景色（用户被认为是在进行选择）。此代码段将 table 的颜色设置为透明，因此更容易看到正在发生的着色。

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>

Answer 2

colorTd() 函数检查您是否单击了 td 然后向其添加 class
单击它或拖动鼠标时它会激活
onmousedown 和 onmouseup 检查单击时是否拖动鼠标。它存储在 mouseIsDown

当您的鼠标悬停在 table 上（由 onmouseover 决定）并且当 mouseIsDown 为 true 时，colorTd() 函数将执行，给 tds class

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>

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

How to change color of an html table cell when mouse is down, based on which cell it is hovering over?

html

javascript

css

event-listener

onmousedown