单击并拖动多个 div？

Question

我正在尝试创建一个实时绘图工具来帮助加强我的 JavaScript 和 node.js 技能。我只有 JavaScript 部分有问题。在一个 3 x 3 的网格上，我想要它，所以如果你按下鼠标并经过多个 divs，换句话说，单击并拖动，其他 divs 也会改变颜色。

但是，现在只有我鼠标按下的第一个 div 会真正改变颜色。

如果你访问我的 jsfiddle，http://jsfiddle.net/a5j8u6wq/

在多个框上尝试 onmousedown，您会发现它无法为第一个框以外的框着色。

我该如何解决这个问题？

谢谢

下面包含 jsfiddle 内容的副本：

HTML

  <body>
<div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
  </body>

CSS

    div {
    width: 300px;
    height: 600px;
}

div div {
    width: 100px;
    height: 100px;
    outline: 1px solid;
    float: left;
}

JavaScript

    var box;
    var boxArray;
             boxArray = [];

        box = document.getElementsByClassName("box");
        for ( var i = 0; i < box.length; i++ ) (function(i){
  box[i].onmousedown = function() {
    box[i].style.backgroundColor = "green";
  }
})(i);

Answer 1

onmousedown 事件只会在您在框上按下鼠标按钮时捕获。它会检查您是否在该项目上按下了鼠标按钮，而不是检查鼠标当前是否在该项目上。所以它只会影响你点击的框。您正在寻找 onmousemove 或 onmouseenter，然后在事件中检查鼠标左键是否按下，在这种情况下意味着 e.buttons 是 1:

box[i].onmousemove = function(e) {
    if(e.buttons == 1) // If the mouse button is down
        box[i].style.backgroundColor = "green"; // draw
}

Fiddle Example

单击并拖动多个 div？

Click and drag over multiple divs?

html

javascript

onmousedown

HTML

CSS

JavaScript