The custom ContextMenu is not displayed because the display object is "on top"

as a follow-up answer to another question: I created a custom contextmenu element in a flash app and had a problem with it sometimes not showing. I found out that the problem was that another sprite lay "on top" of an element with a custom context menu.

however, even if the "mouseEnabled" and "mouseChildren" properties are set to false for the "top" element, I still cannot get the custom context menu to display ... any ideas? thank!

ps: this is the code you see:

var spr:Sprite=new Sprite();,1);,0,100,100);

var blocker:Sprite=new Sprite();

var customContextMenu:ContextMenu = new ContextMenu();
var item:ContextMenuItem = new ContextMenuItem("custom item");
item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, menuItemSelectHandler,false,0,true);
spr.contextMenu = customContextMenu;

function menuItemSelectHandler(cem:ContextMenuEvent) {
    trace("hello context");


when the mouse is over the green rectangle the custom context mode is not displayed


source to share

1 answer

The context menu for an object will only be displayed if the user right-clicks on that object directly as far as I know.

I have simplified your problem in this code:

public class Test extends Sprite
    public function Test()
        stage.align = StageAlign.TOP_LEFT;
        stage.scaleMode = StageScaleMode.NO_SCALE;

        var sprite:Sprite = new Sprite();
        addChild(sprite);;, 0, 200, 200);;

        var shape:Shape = new Shape();
        addChild(shape);, .6);, 100, 200, 200);;


    private function setUpContextMenu(target:InteractiveObject):void
        var menu:ContextMenu = new ContextMenu();
        target.contextMenu = menu;

        var item:ContextMenuItem = new ContextMenuItem("About Us");


When you right-click an area where the red and blue squares overlap, you do not get a custom context menu.

Here's a possible solution where I only modified the function setUpContextMenu()


    private function setUpContextMenu(target:InteractiveObject):void
        var menu:ContextMenu = new ContextMenu();
        this.contextMenu = menu;

        var item:ContextMenuItem = new ContextMenuItem("About Us");

        var handler:Function = function (event:ContextMenuEvent):void {
            // Start with empty menu.
            var items:Array = [];

            if (event.mouseTarget == target) {
                // Directly right-clicked on target. Add custom item.
                items = [item];

            } else if (event.mouseTarget is DisplayObjectContainer) {
                var o:DisplayObjectContainer
                    = DisplayObjectContainer(event.mouseTarget);
                var pt:Point = o.localToGlobal(new Point(o.mouseX, o.mouseY));
                var arr:Array = o.getObjectsUnderPoint(pt);

                // One of the mouse target descendants is our target,
                // directly under the pointer. Add custom item.
                if (arr.indexOf(target) != -1)
                    items = [item];

            menu.customItems = items;

        menu.addEventListener(ContextMenuEvent.MENU_SELECT, handler);


Here I am assigning the context menu to the application itself. In the event, "menuSelect"

I customize it based on whether the mouse pointer is over the red square.



All Articles