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

Question

https://jsfiddle.net/jlpiedra90/3a7cojgw/4/

查看上面的 fiddle 以获得实际代码。

我正在尝试为 2d canvas 游戏创建基本菜单。目前我对其中的大部分内容都很满意，因为它可以很好地满足我的需要。但是，除了更改屏幕所需的 '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;
};

当我将每个 Button 'function' 推到一个数组，GUI 时，事件监听器被添加。奇怪的是，虽然 'mousedown' 侦听器对每个单独的按钮都能正常工作，但 'mousemove' 侦听器只会对最后添加的按钮起作用。因此，将鼠标悬停在 'About' 按钮上会显示更改后的光标； 'Help' 或 'Start' 不是这种情况。我正在使用 jQuery 来处理光标更改。

如能提供任何帮助来纠正此问题，我们将不胜感激，但请注意，我正在尝试尽可能多地从头开始。我知道 Easel、Create 等库，但不希望将它们用于该项目。谢谢！

Answer 1

所有你的按钮组，一个接一个，同一个节点的光标属性：#canvas.

所以，假设光标在第二个按钮上，这是当您收到事件时会发生的情况：

按钮 1 获取事件，它将 canvas 的光标设置为 'auto'
反过来，按钮 2 获取事件，它将 canvas 的光标设置为 'pointer'（这会覆盖按钮 1 所做的）。
依次，按钮 3 获取事件，它将 back canvas 的光标设置为 'auto'（这会覆盖前两个所做的） .

因此，目前只有最后创建的按钮很重要。

Here is a working fiddle。我向您的 Button 构造函数添加了一个布尔值，以便每个按钮仅在光标先前位于其顶部时才设置回 canvas 的光标。

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

'mousemove' event listener in canvas - pointer change in last rectangle only

html

javascript

jquery

canvas