我正在使用横跨整个网页宽度和长度的 Canvas 。每当我在 Canvas 上的任何地方单击、向任何方向移动鼠标时,我都可以创建框,一旦我释放框就创建好了。想一想选择在任何桌面上的工作方式,但在 mouseup
上选择框是在 Canvas 上绘制的。
我的问题是,每当我鼠标悬停
我创建的任何框时,我都想更新光标。我将它们存储在一个名为面板的数组中。
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 实现,不使用库。
最佳答案
这是因为您的 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;
关于javascript - 应用 CSS 样式在 Javascript 中表现不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35379788/