Javascript '；mousemove'；画布中的事件侦听器-仅在最后一个矩形中更改指针

查看上面的小提琴以了解实际代码

我正在尝试为2d画布游戏创建一个基本菜单。目前我对它的大部分都很满意，因为它可以满足我的需要。然而，除了更改屏幕所需的“mouseclick”事件之外，我认为添加“mousemove”会更清楚地表明，当鼠标悬停在按钮上时，用户实际上是在他们可以单击的按钮上移动鼠标

无论如何，下面是我的按钮功能的相关代码：

var Button = function(...) {
    ...        
    I.over = function(event) {
        x = event.offsetX;
        y = event.offsetY;

        if (x >= I.bX && x <= (I.bX+I.bW) && y >= I.bY && y <= (I.bY+I.bH)) {
            $('#canvas').css('cursor','pointer');
        } else {
            $('#canvas').css('cursor','auto');
        };
    };
    I.removePress = function () {
        canv.removeEventListener('mousemove', I.over, false);
        canv.removeEventListener('mousedown', I.pressed, false);
    };
    canv.addEventListener('mousemove', I.over, false);
    canv.addEventListener('mousedown', I.pressed, false);
    return I;
};

var按钮=函数（…）{
...        
I.over=功能（事件）{
x=事件偏移量x；
y=event.offsetY；
如果（x>=I.bX&&x=I.bY&&y）所有按钮都一一设置，则同一节点的游标属性：
#canvas

那么，假设光标位于第二个按钮上，下面是当您得到一个事件时发生的情况：

按钮1获取事件，它将
canvas
的光标设置为
'auto'
反过来，按钮2获取事件，它将
canvas
的光标设置为
“指针”
（这将覆盖按钮1所做的操作）
反过来，按钮3获取事件，它将
canvas
的光标设置回
'auto'
（这将覆盖前两个按钮所做的操作）
因此，目前，只有最后创建的按钮起作用

。我在按钮构造函数中添加了一个布尔值，以便每个按钮仅当光标以前位于其上方时，才将
画布的光标向后设置。
最有可能的情况是，在创建第二个按钮时，删除了第一个按钮的事件侦听器。然后，在为第三个按钮创建事件侦听器时，删除了事件列表第二个按钮的ener。更新：在进行了更多的修补之后，问题似乎不在于“mousemove”的eventListeners，而在于jQuery如何处理CSS更改。将光标更改替换为“alert”事件显示“button.over”正在对所有按钮单独执行。虽然我有些松了一口气，但现在我还是离开了不知道还有多少其他方法可以更改光标……因此，“mouseover”事件有效地侦听了我添加的所有按钮，这就是为什么即使它位于第一个按钮上（Button1.over=true），它也不在第二个按钮上（Button2.over=false）因此，它将被设置为false。并且，由于没有任何东西可以取代第三个按钮的功能，它将显示指针。现在有意义了！非常感谢您的帮助，回答+解释！欢迎。顺便说一句，请注意，当您滚动页面时，我认为您的按钮有问题。是的，在我对Niddro的评论的回复中，我看到并更正了ted，这与canvas.offset命令有关。