浏览器(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 测过,问题依旧。