如何在jQuery中实现点击并按住时修改td元素颜色

我明白你想要的效果——按住鼠标拖动时，经过的<td>单元格自动填充颜色，同时保留点击单个单元格上色的功能对吧？核心是要跟踪鼠标的按下状态，再结合鼠标移动事件来联动处理，之前的问题应该是没把这两个状态正确关联起来，下面给你一个简洁可靠的实现：

核心思路 #

• 用一个变量标记鼠标是否处于按下状态（isMouseDown）
• 在单元格上监听mousedown：按下时激活状态，同时给当前单元格上色
• 在单元格上监听mouseover：鼠标经过时，如果状态激活，就给当前单元格上色
• 在全局document上监听mouseup：不管在哪里松开鼠标，都关闭激活状态（避免在表格外松开后还继续上色）

代码示例 #

HTML 结构

<table id="colorGrid" border="1">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

CSS（可选，让单元格更直观）

td {
  width: 50px;
  height: 50px;
  background-color: #fff;
  cursor: crosshair;
}
td.colored {
  background-color: #2ecc71;
}

JavaScript 实现

// 初始化状态变量
let isMouseDown = false;
const grid = document.getElementById('colorGrid');
const cells = grid.querySelectorAll('td');

// 给每个单元格绑定按下事件
cells.forEach(cell => {
  cell.addEventListener('mousedown', () => {
    isMouseDown = true;
    // 按下时直接给当前单元格上色
    cell.classList.add('colored');
  });

  // 鼠标经过时，如果处于按下状态就上色
  cell.addEventListener('mouseover', () => {
    if (isMouseDown) {
      cell.classList.add('colored');
    }
  });
});

// 全局监听鼠标松开，确保任何地方松开都能关闭状态
document.addEventListener('mouseup', () => {
  isMouseDown = false;
});

关键细节说明 #

• 把mouseup绑定在document上是关键：如果用户按住鼠标拖动到表格外再松开，依然能正确关闭isMouseDown状态，不会出现“松开鼠标后还继续上色”的bug
• 保留了点击单个单元格的功能：因为mousedown事件本身就会触发上色
• 如果需要支持取消上色（比如右键点击），可以额外监听contextmenu事件并阻止默认行为，再切换colored类

这样就能完美实现你想要的“点击单个填色+按住拖动连续填色”的效果啦！

内容的提问来源于stack exchange，提问作者nybyjojo