Make mouse event respond to layer only

cocos2d-x JavaScript
1

I have a scene that creates 2 layers in separate parts of the screen

   var scene_word_t = cc.Scene.extend
({
  onEnter:function ()
  {
    this._super();
    var layer_word_main = new layer_word_main_t();
    layer_word_main.init();
    var layer_word_board = new layer_word_board_t();
    layer_word_board.init();
    this.addChild(layer_word_main);
    this.addChild(layer_word_board);
  }
});

one of the scenes implements a mouse event

  var layer_word_board_t = layer_basic_t.extend
({
  init: function ()
  {
    this._super(cc.color(0, 255, 0, 128));

    if('mouse' in cc.sys.capabilities)
    {
      cc.eventManager.addListener({
        event: cc.EventListener.MOUSE,
        onMouseDown: this.onMouseDown.bind(this),
        onMouseMove: this.onMouseMove.bind(this),
        onMouseUp: this.onMouseUp.bind(this)
      }, this);
    }

when I click on parts of the screen covered by the other layer, the mouse event is also triggered. Is there a way to avoid this ?

2

Use an EventListenerTouchOneByOne and setSwallowTouches(true)

Cocos2d-x treats mouse events like touch events on PC.

In the onTouchBegan check if the touch is within the bounding box of the layer. If it isn’t, return false

There might be a better way though but this will also work.