复现方式:
1.给Item添加cc.Mask组件
2.将注册了触摸事件的节点或按钮放在有cc.Mask的节点下
3.此时未被遮住的部分可以响应点击事件
4.当item滑出屏幕时,被遮住部分依然不能响应,但未被遮住部件却依然还能响应触摸
一、测试1:
1.层级:
2.未滑出测试:
3.滑出测试:
综上猜测,被两个Mask遮住时事件就会响应
二、测试2:
1.去调ScrollView,使用两个嵌套Mask的层级
2.点击点击效果:
总结:两个Mask嵌套时,子节点的触摸事件在只有被父Mask遮挡的区域可点击
三、终极测试
1.层级展示
2.点击测试
现象:M3这个mask区域外button无响应,区域内虽然被M1、M2遮挡了但button依然可以响应。
结论:按钮父节点中,第一个拥有cc.Mask组件的节点(Mask3)遮罩区域决定了这个按钮的可响应区域。其他mask节点虽然也阻止了按钮被遮罩区域渲染出来,但是确没有阻止按钮被点击
四、解决方案
在需要实际起到触摸屏蔽的节点上做超出节点的触摸事件在派发阶段就屏蔽掉操作。即,将下面的脚本添加到该节点上。
const {ccclass} = cc._decorator;
@ccclass
export default class TouchMask extends cc.Component {
protected onLoad() {
this.node.on(cc.Node.EventType.TOUCH_START, this.onTouch, this, true);
this.node.on(cc.Node.EventType.TOUCH_END, this.onTouch, this, true);
this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouch, this, true);
}
private onTouch(event: cc.Event.EventTouch) {
const eventP = event.getLocation();
const print = this.node.parent.convertToNodeSpaceAR(eventP)
const Rect = this.node.getBoundingBox();
if (!Rect.contains(print)) {
event.stopPropagation();
}
}
}