【BUG】3.3.2 BlockInputEvents 阻挡显示层级高于自己的兄弟节点的事件。stopPropagation 或 stopImmediatePropagation 也会。

浏览器(chrome)环境,原生环境未测试 .

重现步骤:
1、新建工程。创建UI节点,结构如下:
root // 空节点,用作UI容器 , 大小同视口宽度
– bg // 背景,半透明,大小同 root

2、编辑器操作, 给bg节点上添加一个 BlockInputEvents 组件。希望该组件能够阻挡用户操作穿透bg节点。

3、业务代码动态添加其他组件,添加之后结构如下:
root
– bg
– 其他通过代码动态添加的组件

4、结果发现,其他通过代码添加的组件,其InputEvents都被阻挡,原本是希望阻挡显示层级低于root的node。而不是阻挡动态添加到root,层级高于bg的root的子节点。

一个节点上添加BlockInputEvents不应当阻挡之后通过业务代码添加的,显示层级高于自己的兄弟节点的事件。

如果把BlockInputEvents组件添加到root上,则毫无作用,它是空容器,不能阻挡所有显示层级低于root的其他节点的事件。

如果在root上添加一个sprite组件,那么它能够挡住按钮之类的东西,但挡不住editBox组件,一个editBox在root后面,它仍然能被选中并出现输入效果。

如果通过代码调用 topPropagation 或 stopImmediatePropagation ,也会阻挡之后addChild到同一个父节点的兄弟节点的事件。
比如:
我们有节点 parentNode,
parentNode 下,有节点 bg,
bg 监听各种输入:
> this._bgNode = this.uiNode.getChildByName(‘bg’);
> this._bgNode.on(Node.EventType.MOUSE_ENTER, (e:Event)=>{e.stopPropagation}, this);
> this._bgNode.on(Node.EventType.MOUSE_DOWN, (e:Event)=>{e.stopPropagation}, this);
> this._bgNode.on(Node.EventType.MOUSE_UP, (e:Event)=>{e.stopPropagation}, this);
> this._bgNode.on(Node.EventType.MOUSE_LEAVE, (e:Event)=>{e.stopPropagation}, this);
> this._bgNode.on(Node.EventType.TOUCH_START, (e:Event)=>{e.stopPropagation}, this);
> this._bgNode.on(Node.EventType.TOUCH_END, (e:Event)=>{e.stopPropagation}, this);
然后,parentNode.addChild(aNode)
然后就会发现,aNode的各种输入事件被阻挡了。

3.3.2 测过,问题依旧。

有好心人给点指导吗?

这个我按照你的介绍的方式,复现了一下,好像不能复现。
如果方便的话,可以提供你的测试工程,让我看一下。

稍后我上传一个干净的测试工程给你。

block event,不是 capture event,你要的是 capture。
block event 是拦截点击事件,防止点中下层节点,它对渲染在上面的其它节点无能为力,不论父子关系。参考 BlockInputEvents 组件参考 · Cocos Creator

想要 capture 的话,bg.on(xxx, (e:Event)=>{e.stopPropagation}, this, true);

1赞

好的,谢谢,我试一下。

好吧,找到问题了。我那个被挡住事件的Node,她的层没有设置对,应当是UI2D , 我设置成了 default

该主题在最后一个回复创建后14天后自动关闭。不再允许新的回复。