CocosCreator 事件阻挡和事件穿透

版本：2.4.3

事件阻挡

如下图，现在实现只让白色响应事件，不让红色响应事件。（注意层级关系，红色包含着白色）

 给红色和白色添加点击事件

this.white.on(cc.Node.EventType.TOUCH_END, ()=>{console.log("white click")},this);
this.red.on(cc.Node.EventType.TOUCH_END, ()=>{console.log("red click")},this);

点击白色和红色重叠区域，默认情况下白色和红色都会响应点击事件

给在上方的白色挂上一个Block Input Events组件

事件会被阻挡，只有白色响应事件，红色不会响应点击事件

 

事件穿透

现在实现让红色和白色都能响应事件。 (注意red和white的层级关系，事件阻挡例子里是包含关系，这里是上下层关系)

点击白色和红色重叠区域，默认情况下只有上方的白色响应事件，红色不会响应点击事件。

编写一个穿透事件组件，并给上层的白色添加该组件。

const { ccclass, property } = cc._decorator;

/**
 * 该组件将所属节点内的所有输入事件穿透到下层节点，一般用于上层 UI 的背景。
 * 该组件没有任何 API 接口，直接添加到场景即可生效。
 */
@ccclass
export class ThroughInputEvents extends cc.Component {
    onLoad(): void {
        (this.node as any)._touchListener.setSwallowTouches(false);
    }
}

　　

添加穿透事件组件后，再次点击重叠区域，则白色和红色都能响应事件