首页 > 代码库 > 【cocos2d-js教程】cocos2d-js 遮挡层(禁止触摸事件传递层)

【cocos2d-js教程】cocos2d-js 遮挡层(禁止触摸事件传递层)

在游戏中,我们经常会碰到一些弹窗,这些弹窗禁止点透,也就是禁止触摸事件传递到底层,我们称之为遮挡层,这些遮挡层,需要开发遮挡层,我们首先得了解cocos2d-js的触摸传递机制,本文主要针对cocos2d-js v3.0 final版本。

根据官方文档,我们可以得知,触摸方式有五种,但是根据需求,我们需要做的是拦截触摸监听。

所以我们简单封装了这么一个类,如下所示:

cc.ModelLayerColor = cc.LayerColor.extend({  m_touchListener:null,  ctor:function(){    this._super();    var touchListener = {      event: cc.EventListener.TOUCH_ONE_BY_ONE,      swallowTouches: true,      onTouchBegan: this.onTouchBegan    };    cc.eventManager.addListener(touchListener, this);    this.m_touchListener = touchListener;  },  onTouchBegan:function(touch, event) {    var target = event.getCurrentTarget();    if(!target.isVisible() || (!this.isTouchInside(target,touch))){      return false;    }    return true;  },  isTouchInside: function (owner,touch) {    if(!owner || !owner.getParent()){      return false;    }    var touchLocation = touch.getLocation(); // Get the touch position    touchLocation = owner.getParent().convertToNodeSpace(touchLocation);    return cc.rectContainsPoint(owner.getBoundingBox(), touchLocation);  }});
这里要把swallowTouches设置为true,这样onTouchBegan返回true才能够吞噬触摸,不继续往优先级更低的层传递,从而实现遮挡层。

【cocos2d-js教程】cocos2d-js 遮挡层(禁止触摸事件传递层)