Limit layer to a size and scroll childrin within with LimeJS

Question

I have a map which I want to be able to scroll in. The scrolling works, but now because the map goes under my menu, the mousedown event for clicking on something in the menu fires both that listener and the map drag listener because the map goes out of it's layer size and is under the menu. Is there any way to limit this?

Code:

//set main namespace
goog.provide('rh.game');

//get requirements
goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.Layer');
goog.require('lime.RoundedRect');
goog.require('lime.Sprite');
goog.require('lime.Label');
goog.require('rh.house');
// entrypoint
rh.start = function(){

var director = new lime.Director(document.body,1024,768).setDisplayFPS(false),
Game = new lime.Scene(),
menulayer = new lime.Layer().setAnchorPoint(0,0).setPosition(0,568),
menubg = new lime.RoundedRect().setAnchorPoint(0,0).setSize(1024,200).setFill('assets/menubg.png'),
houselbl = new lime.Sprite().setPosition(0, 0).setAnchorPoint(0,0).setFill('assets/storage.png');
flayer = new lime.Layer().setAnchorPoint(0,0).setPosition(0,0).setSize(1024,568),
field = new lime.Sprite().setSize(3000,2500).setAnchorPoint(0,0).setFill('assets/fields.jpg'),
selected_ = -1;

menulayer.appendChild(menubg);
menulayer.appendChild(houselbl);
flayer.appendChild(field);

goog.events.listen(flayer,['mousedown'],function(e){
    if(selected_ == 1){
    var house = new rh.house().setPosition(e.position.x, e.position.y);
    flayer.appendChild(house);
    selected_ = -1;
    houselbl.setFill('assets/storage.png');
    }


    e.startDrag(false, new goog.math.Box(-1932, 0, 0, -1976));      
});

goog.events.listen(houselbl,['mousedown'],function(e){
    selected_ = 1
    houselbl.setFill('assets/storages.png');
});

Game.appendChild(flayer);
Game.appendChild(menulayer);

director.replaceScene(Game);
}

Thank you for reading.

Answer 1

Adding e.event.stopPropagation() to the listener fixed it to stop it from accessing other objects than what it points to when overlapping.

Example:

goog.events.listen(houselbl,['mousedown'],function(e){
    e.swallow(['mouseup'],function(){

    if (selected_ !== -1) {
        selected_ = -1;
        houselbl.setFill('assets/storage.png');
    }else{
    selected_ = 1
    houselbl.setFill('assets/storages.png');
    }
    });
e.event.stopPropagation()
});