キャンバスマウスオーバーで3/4ボタンが盗まれました

Question

下記のフィドルを見て、できるだけ表示ウィンドウを広げてください。私はそれを取得しようとしているので、私は矢印上にマウスを置いてクリックすることができます。私は現在、ホバーコードとして赤い四角形を持っています。残念ながら、これは＃0の矢印ボックスでのみ機能します。私はこれが他の3つのボックスではうまくいかない理由を知りません。コンソールに出力が記録され、マウスとホバーのコードが一致して更新されていますが、カーソルのスタイルが変更されていることがわかります：ポインタが機能しません！

https://jsfiddle.net/8avwjxjq/

-

（例コンソール出力は、以下のコードを参照してください）I：1

coordsObj.arrows [I]：116548

するmouseX：171

mouseYの： 569

// Capture Clicks 
      document.addEventListener('mousemove', function(e){ 

       // console.log("mouseX:"+mouseX+", "+mouseY); 

       for (var i = coordsObj.arrows.length - 1; i >= 0; i--) { 
        // console.log("coordsObj: "+[coordsObj.arrows[i-1], coordsObj.arrows[i]]); 
        // console.log("mousePos: "+[mouseX, mouseY]); 
        var mouseX = e.pageX, 
         mouseY = e.pageY, 
         arrowX = coordsObj.arrows[i][0], 
         arrowY = coordsObj.arrows[i][1], 
         radius = 50; 

        // Debugging 
        console.log("i: "+i); 
        console.log("coordsObj.arrows[i]: "+coordsObj.arrows[i]); 
        console.log("mouseX: "+mouseX); 
        console.log("mouseY: "+mouseY); 

        ctx.fillStyle = "red"; 
        ctx.fillRect(arrowX-(2*radius), arrowY-radius, radius, radius); 
        textObj.draw(i, arrowX, arrowY, 24, "#fff"); 

        // Arrow Radius Hover 
        if (mouseX > (arrowX - radius) && mouseX < (arrowX + radius) && mouseY > (arrowY - radius) && mouseY < (arrowY + radius)){ 
         body.style.cursor = "pointer"; 
        } else { 
         body.style.cursor = "default"; 
        } 

       } 

      }); 

Answer 1

問題は、各場所のカーソルを設定していることです。だから、マウスがループの始めにあるボックスの上にくると、ポインタをポインタに設定しますが、マウスが別のものの上にあるので、すぐ次のボックスはマウスの下にはありません。ない場合は、単にループがに設定する前に、あなただけの

カーソルという変数を作成する必要があり、あなたの問題を解決するためにbreakでループから抜け出す可能性があるので、あなたがループに必要なレンダリングのためのすべての項目を想定すると

デフォルト

var cursor = "default"; // Add this befor the loop 

、ループ内の他の部分を削除して、目の後に続いて

for (var i = coordsObj.arrows.length - 1; i >= 0; i--) { 
    // your loop logic....  

    if (mouseX > (arrowX - radius) && mouseX < (arrowX + radius) && mouseY > (arrowY - radius) && mouseY < (arrowY + radius)){ 
      // mouse over button 
      cursor = "pointer"; // set the cursor 
    } // else { // this was the bit turning off the cursor so removing it 
    // body.style.cursor = "default"; 
    //} 

} // end of loop 

必要であれば、単にカーソルを設定します