网站建造免费软文撰写

当我打开一个二级弹窗后，希望可以通过点击弹窗以外的区域来关闭该弹窗。一开始我是在弹窗主节点上挂载了一个 button 组件，该 button 注册的点击事件中关闭该弹窗。在子节点（一个背景图）的image组件上启用 Raycast Target 选项，希望拦截点击事件，使得该背景图区域不会触发关闭按钮的事件。但是实际表现上，在该区域仍然可以触发主节点上的 button 点击事件。

查了各种资料，加上各种尝试，发现了两种解决办法。
第一种方案，是主节点不用 button 来响应关闭事件，而是继承 IPointerClickHandler，重写 OnPointerClick 方法来响应点击事件，在响应函数中检查点击区域是否在子节点区域外，在区域外才执行关闭逻辑。这种方法可行，但是不优雅。


第二种方案，是将 button 挂载到子节点同层级的 object 上，而不是直接放在主节点上。通过尝试，发现取消 Raycast Target 选项时，点击 imgBg 时会穿透使得 bgMask 上的 button 响应。勾上 Raycast Target 选项后，不再穿透。从这里可以看出，Raycast Target 选项对于同级对象，只有最上层对象会响应点击，但是为了让点击事件能传递下去，该选项不会阻止下层节点的响应。


参考链接：

• UI点击穿透组件