Question

请参阅下面的小提琴，尽可能扩大查看窗口。我试图得到它所以我可以将鼠标悬停在箭头上并单击它。我目前有红色方块作为悬停坐标。不幸的是，这仅适用于＃0箭头框。我不知道为什么这对其他3个盒子不起作用。控制台记录输出，你可以看到鼠标和悬停坐标匹配和更新，但光标的样式更改：指针不起作用！

https://jsfiddle.net/8avwjxjq/

（示例控制台输出 - 请参阅下面的代码）

我：1

coordsObj.arrows [i]：116,548

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突破循环以解决您的问题

需要在循环设置为默认值

之前创建一个名为cursor的变量

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

然后在循环中删除else部分，只需设置光标，如果需要

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

然后在循环完成后设置光标并解决您的问题..

body.style.cursor = cursor; // now set the cursor and if over a button 
                                // it will be correct

快乐编程...... :)

通过Coords的Canvas Mouseover用于3/4按钮

1 个答案: