鼠标悬停只处理最后一项

Question

var canvas = document.getElementById('mainCanvas');
var ctx = canvas.getContext('2d');
var status = document.getElementById('status');
var click = document.getElementById('click');
var hover = document.getElementById('hover');
canvas.style.backgroundColor = 'red';
var mouseX;
var mouseY;
var item1 = new item('item1', ctx);
item1.drawItem(50, 50);
var item2 = new item('item2', ctx);
item2.drawItem(150, 200);
var item3 = new item('item3', ctx);
item3.drawItem(200, 250);
var items = [item1, item2, item3];
canvas.addEventListener('mousemove', mouseMoveHandler, false);
canvas.addEventListener('click', mouseClickHandler, false);
function mouseMoveHandler(event) {
mouseX = event.clientX - canvas.getBoundingClientRect().left;
mouseY = event.clientY - canvas.getBoundingClientRect().top;
for (var i = 0; i < items.length; i++) {
	if (mouseX > items[i].x & mouseY > items[i].y &
		mouseX < items[i].x + items[i].width & mouseY < items[i].y + items[i].height) {
		hover.innerHTML = items[i].name;
	} else {
		hover.innerHTML = 'No';
	}
}
}
function mouseClickHandler(event) {
click.innerHTML = mouseX + ' | ' + mouseY;
}
function item(name, ctx) {
this.x = undefined;
this.y = undefined;
this.width = 50;
this.height = 50;
this.name = name;
this.drawItem = function(x, y) {
ctx.fillRect(this.x = x, this.y = y, this.width, this.height);
}
}

<div class='canvas'>
<canvas id='mainCanvas' width='500' height='300'></canvas>
</div>
<p id='click'>0 | 0</p>
<p id='hover'>No</p>

我正在努力实现的目标：

当鼠标悬停在画布中的每个正方形(或项目)上时，我希望正方形的名称(在创建每个项目时指定为第一个参数)显示为悬停元素。

我得到的：

它在某种程度上起作用，但只适用于最后一个方块。每当我将鼠标悬停在不是最后一个的任何其他正方形上时，"悬停"元素都不会显示鼠标所在的正方形的名称。我甚至创建了一个新项并将其添加到"items"数组中，它可以与新项一起使用，但不能与其他项一起使用。

Answer 1

您的问题是在找到命中后for循环仍在运行。比方说你鼠标项目2。您的代码将工作并显示"item2"。然后循环进入下一步，检查您是否将鼠标悬停在项目3上。您没有，因此代码显示"否"。

解决方案是一旦你命中就停止循环

if (mouseX > items[i].x & 
mouseY > items[i].y &
mouseX < items[i].x + items[i].width & 
mouseY < items[i].y + items[i].height
) {
hover.innerHTML = items[i].name;
break;
} else {
hover.innerHTML = 'No';
}