点击任意位置关闭（CocosCreator）

推荐阅读：

•  我的CSDN
•  我的博客园
•  QQ群：704621321
•  我的个人博客

      今天，接触到一个新功能，当弹出某个弹框时，需要点击除弹框的剩余任意位置，来关闭该弹框，例如：当红框内容显示时，点击红框外任意位置可关闭红框。



      刚开始做这个功能时，第一想法：

      判断点击的UI不是该弹框UI，改功能只需要一个if语句就能实现，这时候我发现有两个困难点,1:如何判断点击的UI是否是目标弹框；2：使用该方法，需要为除弹框外的整个UI界面添加监听事件，由于开始搭建UI的时候没有考虑这种情况，所以要为除弹框外的整个UI界面添加监听事件就特别繁杂。

      为此，我果断放弃了这种方法，我又寻找到另一种方法：可不可以添加一个屏幕大小的透明Button，当弹框弹出来时，显示Button，为Button添加一个监听事件：关闭弹框。但是我又发现问题，以前用U3D的事件，点击事件具有穿透效果，当弹框弹出来时，Button也显示，这样会造成点击弹框上某UI，也会触发Button的监听事件。

      当然，这只是根据自己的开发经验推测的，由于暂时没想到其他方法，我还是尝试了一下，发现cocos并不存在事件的穿透。所以，在你走头无路的时候，需要用于尝试，有时候，你和成功只差一步：动手实践。

接下来。讲讲我的实现过程吧

1.在弹框的上面一个层级，新建一个透明Button，命名为：anyPos

2.为anyPos添加监听事件

		// 查找btn
        var findBtn = function (str, prt, call, bAudio = true) {
            var obj = cc.find(str, prt);
            obj.on("click", function () {
                if (bAudio) { gm.HallAudio.playClick(); }
                call();
            }, this);
            return obj;
        };

		//任意位置按钮
        uiRoot.anyPos = findBtn("anyPos", obj3, function () {
            self.uiRoot.myBox.active = false;//隐藏弹框
            self.uiRoot.anyPos.active = false;//隐藏anyPos
        })
        //默认anyPos为隐藏的
        self.uiRoot.anyPos.active = false;

3.显示弹框时

//打开弹框
    openMyBox() {
        var self = this;

    self.uiRoot.myBox.active = true;
    self.uiRoot.anyPos.active = true;
    }

其实该功能挺简单的，代码几行就是实现了，也不难理解。