cocos creator 模態對話框創建

相關說明：

• 模態對話框就是當一個模態對話框打開時，用戶只能與該對話框進行交互，而其他用戶界面對象收不到輸入信息。
• 模態對話框下，用戶需要操作目標對話框就必須先操作模態對話框。

而我們在遊戲當中經常會點開按鈕，彈出對話框，此時要屏蔽下層觸摸事件，防止穿透點擊了對話框下面的內容。

創建步驟：

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