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
source to share
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.
source to share