开发者问题收集

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

2022-01-09
1260
javascript html css event-listener onmousedown

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

这是我的 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
       }
}

这是我为当有人简单地单击 I 单元格时编写的代码： 

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 的原因是我不知道如何做到这一点，以便它同时关注悬停和鼠标悬停。

2个回答

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

当您的鼠标位于表格上方（由 onmouseover 确定）并且 mouseIsDown 为 true 时， colorTd() 函数将执行，为 td 赋予一个类 

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>
Anuja Nimesh
2022-01-09

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

此代码片段只是向元素添加了一个类。

但是，需要更复杂一点，以便记住鼠标何时按下，因此着色是在鼠标移动时进行的，并记住鼠标何时抬起。

抬起和放下事件可能发生在表格之外，因此整个文档都会感知到。

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

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>
A Haworth
2022-01-09