마우스 호버는 마지막 항목 작업

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 요소로 표시 할 사각형의 이름 (각 항목을 만들 때 첫 번째 매개 변수로 지정). 내가 갖는 어떤

:

그것은 다소 있지만 마지막 광장, 작동합니다. 마지막 사각형이 아닌 다른 사각형 위로 마우스를 가져갈 때마다 마우스를 올려 놓은 사각형의 이름이 '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'; 
    }