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();
spr.graphics.beginFill(0xff0000,1);
spr.graphics.drawRect(0,0,100,100);
addChild(spr);
var blocker:Sprite=new Sprite();
blocker.x=50
blocker.y=50
blocker.graphics.beginFill(0x00ff00,1);
blocker.graphics.drawRect(0,0,100,100);
addChild(blocker);
blocker.mouseEnabled=false
blocker.mouseChildren=false
var customContextMenu:ContextMenu = new ContextMenu();
var item:ContextMenuItem = new ContextMenuItem("custom item");
customContextMenu.customItems.push(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
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);
sprite.graphics.beginFill(0xFF0000);
sprite.graphics.drawRect(0, 0, 200, 200);
sprite.graphics.endFill();
var shape:Shape = new Shape();
addChild(shape);
shape.graphics.beginFill(0x0000FF, .6);
shape.graphics.drawRect(100, 100, 200, 200);
shape.graphics.endFill();
setUpContextMenu(sprite);
}
private function setUpContextMenu(target:InteractiveObject):void
{
var menu:ContextMenu = new ContextMenu();
target.contextMenu = menu;
var item:ContextMenuItem = new ContextMenuItem("About Us");
menu.customItems.push(item);
}
}
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.