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

时间:2015-03-31 02:16:30

标签: javascript jquery html canvas

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

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

我正在尝试为2D画布游戏创建一个基本菜单。我现在对它的大部分内容感到满意,因为它适用于我需要的东西。然而,除了用于更改屏幕所需的“鼠标点击”事件之外,我认为添加“mousemove”会更清楚地表明,当鼠标悬停在按钮上时,用户实际上将鼠标悬停在他们可以点击的按钮上。

无论如何,这是我的Button功能的相关代码:

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'监听器只能在添加的最后一个按钮上工作。因此,鼠标悬停在“关于”按钮上会显示更改的光标; “帮助”或“开始”不是这种情况。我正在使用jQuery来处理游标更改。

任何帮助都将在纠正这一点时受到赞赏,但请注意,我正在尝试尽可能多地从头开始。我知道像Easel,Create等库,但是不喜欢在这个项目中使用它们。谢谢!

1 个答案:

答案 0 :(得分:0)

所有按钮一个接一个地设置,同一个节点的游标属性:#canvas

所以,假设光标在第二个按钮上,这是当你有一个事件时会发生的事情:

  1. 按钮1获取事件,它将canvas的光标设置为'auto'
  2. 反过来,Button 2获取事件,它将canvas的光标设置为'pointer'(这会覆盖Button 1所做的事情)。
  3. 反过来,按钮3获取事件,它将返回 canvas的光标设置为'auto'(这会覆盖两个第一次所做的事情)。
  4. 因此,目前只有最后创建的按钮很重要。

    Here is a working fiddle。我在你的Button构造函数中添加了一个布尔值,这样每个按钮只有在光标先前位于其上时才设置回canvas的光标。