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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 遮挡层(禁止触摸事件传递层)的主要内容,如果未能解决你的问题,请参考以下文章

免费自学Cocos2d-js2016原创视频教程(17集)

JavaScript强化教程 —— Cocos2d-JS自动JSB绑定规则修改

JavaScript强化教程 —— Cocos2d-JS极速调试技巧

Cocos2d-JS 自定义loading界面

cocos2d-js官方文档搭建 Cocos2d-JS 开发环境

搭建Cocos2d-JS开发环境