Question

我正在尝试创建一个实时绘图工具来帮助增强我的JavaScript和node.js技能。我只遇到了JavaScript部分的问题。在一个3乘3的网格中，我想要它，所以如果你把鼠标放下并经过多个div，换句话说点击并拖动，其他div也会改变颜色。

然而，现在只有我所嘲笑的第一个div实际上会改变颜色。

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

尝试在多个方框上进行操作，您将看到它无法为第一个方框以外的方框着色。

我该如何解决这个问题？

由于

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？

HTML

CSS

的JavaScript

1 个答案: