应用 CSS 样式在 Javascript 中表现不正确

Question

我正在使用跨越整个网页宽度和长度的 canvas。每当我在 canvas 上的任何地方单击，向任何方向移动鼠标时，我都可以创建框，一旦我释放框就会创建。想一想选择在任何桌面上的工作方式，但在 mouseup 上，选择框绘制在 canvas.

上

我的问题是，每当我 mouseover 我创建的任何框时，我都想更新光标。我将它们存储在一个名为 panels 的数组中。

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;

应用 CSS 样式在 Javascript 中表现不正确

Applying CSS styles not behaving correctly with Javascript

javascript

css

mouse

events

canvas