Javascript onmousemove和onclick

Question

我想改变背景颜色，当鼠标被点击，并在元素上移动它的可能性，这样你就不必点击每个元素，但实例能够用鼠标‘绘制’。但我不知道该怎么做。我现在的代码是这样的

​

function change_color(x, y) {
  console.log(x, y);
  var elem = document.getElementById(x.toString() + "-" + y.toString());
  if (elem.style.backgroundColor == 'white')
    elem.style.backgroundColor = 'black';
  else
    elem.style.backgroundColor = 'white';
}

#board td {
  /*border: 1px solid rgb(175, 216, 248);*/
  width: 25px;
  height: 25px;
  border: 1px solid black;
  background-color: white;
}

<table id="board">
  <tr>
    <td id='0-0' onmousedown="change_color(0,0);"></td>
    <td id='0-1' onmousedown="change_color(0,1);"></td>
  </tr>
  <tr>
    <td id='1-0' onmousedown="change_color(1,0);"></td>
    <td id='1-1' onmousedown="change_color(1,1);"></td>
  </tr>
</table>

​

Answer 1

您需要使用某种类型的变量来了解鼠标是否按下，并使用mousemove事件。

​

let isDown = false
document.body.addEventListener("mousedown", function () {
  isDown = true
});

document.body.addEventListener("mouseup", function () {
  isDown = false
});

document.getElementById("grid").addEventListener("mousemove", function (evt) {
  if (isDown) evt.target.classList.add("active")
})

table {
  border-spacing: 0;
  border-collapse: collapse;
  empty-cells: show;
}

td{
  width: 10px;
  height: 10px;
  background-color: white;
  border: 1px dotted #eee;
}

td.active {
  background-color: black
}

<table id="grid">
  <tr>
    <td></td><td></td><td></td><td></td><td></td>
    <td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td>
    <td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td>
    <td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td>
    <td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td>
    <td></td><td></td><td></td><td></td><td></td>
  </tr>
</table>

​

Answer 2

我认为您正在寻找onmousemove来调用函数。每次调用该函数时(即每次鼠标移动时)，您可以检查鼠标按钮是否按下，然后更改像素的颜色。

更多信息请点击此处：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmousemove

Answer 3

我会做一些改变。

1. 尝试使用类而不是内联样式。这允许您使用简单的classList.toggle().
2. I'd切换类使用addEventListener而不是内联在元素本身上附加事件，这既是为了整洁，也是为了减少重复代码。
3. 您可以使用e.which来确定当鼠标悬停在元素上时鼠标是否按下。如果为e.which === 1，则按下鼠标主键。

​

document.querySelectorAll("#board td").forEach((e) => { //for each board td
  e.addEventListener("mouseover", change_color);        //change color on hover
  e.addEventListener("mousedown", change_color);        //change color on click
});

function change_color(e) {
  if (e.which !== 1) return;             //exit if mouse isn't down
  e.target.classList.toggle('black');    //toggle black background
}

#board td {
  width: 25px;
  height: 25px;
  border: 1px solid black;
  background-color: white;
}

#board td.black { background-color: black; }

<table id="board">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

​