滑出ScrollView区域外的item依然能响应触摸事件的总结-附解决方案

复现方式:
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();
        }
    }
}

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值