相关说明:
- 模态对话框就是当一个模态对话框打开时,用户只能与该对话框进行交互,而其他用户界面对象收不到输入信息。
- 模态对话框下,用户需要操作目标对话框就必须先操作模态对话框。
而我们在游戏当中经常会点开按钮,弹出对话框,此时要屏蔽下层触摸事件,防止穿透点击了对话框下面的内容。
创建步骤:
1.首先在对话框UI添加脚本(这里是ModalUI.js),然后在ModalUI里添加一个节点属性:
properties: {
mask : cc.Node,
},
2.在对话框UI下添加一个节点,命名为mask即可,注意mask节点层级关系,mask节点应该在对话框UI最底层。
3.设置mask节点的宽度和高度,使其完全覆盖整个游戏界面(主要是为了防止触摸穿透)
4.把mask节点拖拽至对话框UI下ModalUI脚本的mask属性处。
5.然后编写ModalUI脚本即可。
脚本如下:
cc.Class({
extends: cc.Component,
properties: {
mask : cc.Node,
},
onLoad: function () {
},
// 设置监听事件
onEnable : function(){
this.mask.on('touchstart',function(event){
event.stopPropagation();
});
this.mask.on('touchend', function (event) {
event.stopPropagation();
});
},
// 关闭监听
onDisable : function(){
this.mask.off('touchstart',function(event){
event.stopPropagation();
});
this.mask.off('touchend', function (event) {
event.stopPropagation();
});
},
});
脚本说明
onEnable 和 onDisable是生命周期回调,详情参见 http://www.cocos.com/docs/creator/scripting/life-cycle-callbacks.html
onEnable
当组件的 enabled 属性从 false 变为 true 时,或者所在节点的 active 属性从 false 变为 true 时,会激活 onEnable 回调。倘若节点第一次被创建且 enabled 为 true,则会在 onLoad 之后,start 之前被调用。
onDisable
当组件的 enabled 属性从 true 变为 false 时,或者所在节点的 active 属性从 true 变为 false 时,会激活 onDisable 回调。
监听事件
this.node.on()注册监听事件,off()是关闭。需要注意的是,off 方法的 参数必须和 on 方法的参数一一对应,才能完成关闭。
派送事件
- 在 Cocos Creator 的事件派送系统中,我们采用冒泡派送的方式。冒泡派送会将事件从事件发起节点,不断地向上传递给他的父级节点,直到到达根节点或者在某个节点的响应函数中做了中断处理 event.stopPropagation()。
- stopPropagation 函数说明 : 停止冒泡阶段,事件将不会继续向父节点传递,当前节点的剩余监听器仍然会接收到事件
详情参见:http://www.cocos.com/docs/creator/scripting/events.html