vol stationnaire souris seulement travailler sur dernier élément

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>

Ce que je suis en train d'accomplir:

Lorsque la souris est positionné chaque carré (ou objet) dans la toile, je veux la nom du carré (affecté en tant que premier paramètre lors de la création de chaque élément) à afficher en tant qu'élément de survol.

Ce que je veux:

Il fonctionne un peu, mais seulement avec le dernier carré. Chaque fois que je survole un autre carré qui n'est pas le dernier, l'élément 'hover' n'affiche pas le nom du carré de la souris. J'ai même créé et ajouté un nouvel élément au tableau 'items' et cela a fonctionné avec le nouveau, mais pas avec les autres.

Answer 1

Votre problème est que la boucle for continue à fonctionner après avoir trouvé un hit. Disons vous mouse item2. Votre code fonctionnera et affichera 'item2'. Ensuite, la boucle passe à l'étape suivante et vérifie si vous passez la souris sur l'élément 3. Vous n'avez pas, donc le code affiche «non».

La solution est d'arrêter la boucle une fois que vous avez un coup

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