マウスホバーは、最後の項目に取り組んで

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++) { 
 
    \t if (mouseX > items[i].x & mouseY > items[i].y & 
 
    \t \t mouseX < items[i].x + items[i].width & mouseY < items[i].y + items[i].height) { 
 
    \t \t hover.innerHTML = items[i].name; 
 
    \t } else { 
 
    \t \t hover.innerHTML = 'No'; 
 
    \t } 
 
    } 
 
} 
 

 
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>

私が達成しようとしている何

：マウスがキャンバスに各正方形（またはアイテム）を置い

、私が欲しいですhover要素として表示する正方形の名前（各項目の作成時に最初のパラメータとして割り当てられます）。私は取得しています何

：

それは多少だけ最後の正方形で、動作します。最後のものではない他の四角形の上にマウスを置くと、マウスの上にある四角形の名前は表示されません。私は作成して、新しいアイテムを 'items'配列に追加しました。それは新しいもので動作しましたが、他のものでは動作しませんでした。

Answer 1

あなたの問題は、ヒットした後にforループが実行され続けることです。 item2マウスを言うことができます。あなたのコードは動作し、 'item2'を表示します。その後、ループは次のステップに進み、item3にカーソルを合わせるかどうかを確認します。そうしないと、コードには「いいえ」と表示されます。

ソリューションは、あなたがヒット

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'; 
    }