gpt4 book ai didi

javascript - 单击并拖动多个 div?

转载 作者:可可西里 更新时间:2023-11-01 13:05:28 25 4
gpt4 key购买 nike

我正在尝试创建一个实时绘图工具来帮助加强我的 JavaScript 和 node.js 技能。我只有 JavaScript 部分有问题。在一个 3 x 3 的网格上,我希望这样,如果您按下鼠标并越过多个 div,换句话说,单击并拖动,其他 div 也会改变颜色。

但是,现在只有我鼠标按下的第一个 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);

最佳答案

onmousedown 事件只会在您在框上按下鼠标按钮时捕获。它会检查您是否在该项目上按下了鼠标按钮,而不是检查鼠标当前是否在该项目上。所以它只会影响你点击的框。您正在寻找 onmousemoveonmouseenter,然后在事件中检查鼠标左键是否按下,在这种情况下意味着 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

关于javascript - 单击并拖动多个 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33725092/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com