应用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;