应用CSS样式与Javascript行为不正确

Question

我正在使用横​​跨整个网页宽度和长度的画布。 每当我在画布上的任意位置单击，向任意方向移动鼠标并释放框时，都可以创建框。 想一想选择在任何桌面上如何工作，但是在mouseup ，选择框被绘制在画布上。

我的问题是，每当我将mouseover移到我创建的任何框上时，我都想更新游标。 我将它们存储在称为面板的数组中。

function mouseOverPanels(e) {
        var mouseX = e.clientX, mouseY = e.clientY;

        // loop through all the panels
        for (var i = 0; i < panels.length; i++) {
            // if cursor is within the bounds of one of the panels, update cursor
            if ((mouseX >= panels[i].x && mouseX <= panels[i].x + panels[i].width) && (mouseY >= panels[i].y && mouseY <= panels[i].y + panels[i].height)) {
                canvas.style.cursor = "pointer";
            }

            // if not, then set the cursor to "crosshair" (default)
            else canvas.style.cursor = "crosshair";
        }
    }

该代码有效。 第一次创建面板时，如果将鼠标悬停在其上，则它会正确注册光标位于其范围之内，并相应地更新光标。 但是，无论何时创建新面板，此功能都会停止更新所有先前面板的光标，并且仅适用于最新创建的面板，即使每当我将鼠标悬停在先前面板上时它会正确注册，它也不会在其中更新光标他们的界限。

有什么想法吗？ 解决方案必须完全使用javascript实现，而无需使用库。

Answer 1

这是因为您的if/else将在每个循环中发生，因此只有最后一个循环的结果才有意义，好像您根本没有循环，而只是使用了panels[panels.length - 1] 。

而是设置默认值，然后在找到相关条目时设置指针（并停止循环）：

// loop through all the panels
var cursor = "crosshair";
for (var i = 0; i < panels.length; i++) {
    // if cursor is within the bounds of one of the panels, update cursor
    if ((mouseX >= panels[i].x && mouseX <= panels[i].x + panels[i].width) && (mouseY >= panels[i].y && mouseY <= panels[i].y + panels[i].height)) {
        cursor = "pointer";
        break;
    }
}
canvas.style.cursor = cursor;