3.8.3 鼠标事件监听MOUSE_ENTER的bug(附重现demo)

wutaozhao · 2024年08月30日 10:05

cocos版本：3.8.3

昨天这个帖子目前还没人回：creator 3.8版本 MOUSE_ENTER后立刻触发MOUSE_LEAVE

demo:
TestMouseEvent.rar (6.1 KB)

很容易重现，就是A节点监听MouseEnter和MouseLeave事件，B节点监听MouseMove事件，但B preventSwallow，这样，鼠标进入A的区域后，只要鼠标稍微移动，就会不停的触发A的Enter和Leave事件。

看了下，2.x的这个pr：https://github.com/cocos/cocos-engine/pull/2135/
应该不是同一个问题。

wutaozhao · 2024年09月2日 02:33

大佬今天上班了吧，帮忙看下，该怎么修复

wutaozhao · 2024年09月2日 09:36

凉了吗？自己改不来啊

dumganhar · 2024年09月4日 14:33

这个涉及到 enter 和 leave 的机制了，他们是在由 move 事件中触发的。层级影响了派发顺序。
你 Demo 中 B 在上层盖住了 A，但是又把 B 的 preventSwallow 设置为 true，这导致 B move 后会派发给 A move，A move 中 B leave，A enter。下一次 B move 的时候， A leave, B enter，就会导致在 A 内部移动，A 反复的 enter、leave。

你可以调整一下 A 和 B 的顺序。
还需要合并：

wutaozhao · 2024年09月5日 02:40

谢谢回复，我先试下这个合并。
不过这样听起来很不合逻辑：A的move竟然会导致B leave。
我的需求是，B 触发move的时候，会有icon跟着移动，并且我需要icon移动到A的范围内时在A上面显示，而不是被A盖住。setsiblingindex应该可以，但感觉很蹩脚。

dumganhar · 2024年09月5日 02:44

那别把 icon 节点挂在 B 下不行吗？

wutaozhao · 2024年09月5日 02:50

你是说挂在A下吧？本来就是挂在B下的。但你不是说要调整下A和B的层级吗，就是把B放在A的上面？

wutaozhao · 2024年09月5日 02:51

不过这个问题不大，大不了不用这个功能，只是给公司的PC端平台做个内嵌类型的活动小游戏

dumganhar · 2024年09月5日 02:51

你的 demo 中没有体现 icon 节点，所以不知道你之前 icon 节点是挂在哪里，我猜测挂在了 B 下。

所以我刚的回复是说“别把 icon 节点挂在 B 下”。

wutaozhao · 2024年09月5日 02:51

不好意思~，漏看一个字。。

dumganhar · 2024年09月5日 07:11

嗯，如果你细看 MOUSE_ENTER 和 MOUSE_LEAVE 的相关源码，应该就能理解之前为什么这样设计了。控制 enter 和 leave 事件是有一个全局的缓存住的 _currentHovered 节点的。当某个节点 move 的时候，_currentHovered 就要 leave。具体见：

github.com

cocos/cocos-engine/blob/43ae4fcc97d01d98066e3c4792abcc05182d9361/cocos/scene-graph/node-event-processor.ts#L528


    return false;
}

event.getLocation(pos);

const hit = node._uiProps.uiTransformComp.hitTest(pos, event.windowId);
if (hit) {
    if (!this.previousMouseIn) {
        // Fix issue when hover node switched, previous hovered node won't get MOUSE_LEAVE notification
        if (_currentHovered && _currentHovered !== node) {
            event.type = NodeEventType.MOUSE_LEAVE;
            _currentHovered.dispatchEvent(event);
            _currentHovered.eventProcessor.previousMouseIn = false;
        }
        _currentHovered = node;
        event.type = NodeEventType.MOUSE_ENTER;
        node.dispatchEvent(event);
        this.previousMouseIn = true;
    }
    event.type = NodeEventType.MOUSE_MOVE;
    event.bubbles = true;

我也是通过你这个 issue 刚去 review 这段代码，感觉此问题是设计如此，可能并不是bug。

wutaozhao · 2024年09月5日 03:02

我觉得只要一个需求听起来合理，但实现工具却要求这个需求做出调整才能实现，这时候应该是工具的实现有问题。
感谢您提供的解决方案~

wutaozhao · 2024年09月5日 07:14

改了后，重新编译了引擎（下载的3.8.4），并调整了A和B的顺序，当鼠标在A上移动时，如果不在A上preventSwallow，则
在A上移动时，B收不到move事件，如果在A上preventSwallow，则和最初一样，A又不停的enter和leave。。

t99t99t99 · 2024年09月5日 07:28

大佬，帮我看一下https://forum.cocos.org/t/topic/161118。点击事件被根节点拦截了