Flex自定义右键菜单具体实现

本篇博客主要说明的是flex中屏蔽邮件菜单并且自定义菜单功能。

1、自定义右键菜单注册类

public class RightClickManager { static private var rightClickTarget:DisplayObject; static public const RIGHT_CLICK:String = "rightClick"; static private const javascript:XML = <script> <![CDATA[ function(flashObjectId) { var RightClick = { /** * Constructor */ init: function (flashObjectId) { this.FlashObjectID = flashObjectId; this.Cache = this.FlashObjectID; if(window.addEventListener){ window.addEventListener("mousedown", this.onGeckoMouse(), true); } else { document.getElementById(this.FlashObjectID).parentNode.onmouseup = function() { document.getElementById(RightClick.FlashObjectID).parentNode.releaseCapture(); } document.oncontextmenu = function(){ if(window.event.srcElement.id == RightClick.FlashObjectID) { return false; } else { RightClick.Cache = "nan"; }} document.getElementById(this.FlashObjectID).parentNode.onmousedown = RightClick.onIEMouse; } }, /** * GECKO / WEBKIT event overkill * @param {Object} eventObject */ killEvents: function(eventObject) { if(eventObject) { if (eventObject.stopPropagation) eventObject.stopPropagation(); if (eventObject.preventDefault) eventObject.preventDefault(); if (eventObject.preventCapture) eventObject.preventCapture(); if (eventObject.preventBubble) eventObject.preventBubble(); } }, /** * GECKO / WEBKIT call right click * @param {Object} ev */ onGeckoMouse: function(ev) { return function(ev) { if (ev.button != 0) { RightClick.killEvents(ev); if(ev.target.id == RightClick.FlashObjectID && RightClick.Cache == RightClick.FlashObjectID) { RightClick.call(); } RightClick.Cache = ev.target.id; } } }, /** * IE call right click * @param {Object} ev */ onIEMouse: function() { if (event.button > 1) { if(window.event.srcElement.id == RightClick.FlashObjectID && RightClick.Cache == RightClick.FlashObjectID) { RightClick.call(); } document.getElementById(RightClick.FlashObjectID).parentNode.setCapture(); if(window.event.srcElement.id) RightClick.Cache = window.event.srcElement.id; } }, /** * Main call to Flash External Interface */ call: function() { document.getElementById(this.FlashObjectID).rightClick(); } } RightClick.init(flashObjectId); } ]]> </script>; public function RightClickManager() { return; } static public function regist() : Boolean { if (ExternalInterface.available) { ExternalInterface.call(javascript, ExternalInterface.objectID); ExternalInterface.addCallback("rightClick", dispatchRightClickEvent); FlexGlobals.topLevelApplication.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler); }// end if return true; } static private function mouseOverHandler(event:MouseEvent) : void { //rightClickTarget = DisplayObject(event.target); rightClickTarget = InteractiveObject(event.target); return; } static private function dispatchRightClickEvent() : void { var event:MouseEvent; if (rightClickTarget != null) { event = new MouseEvent(RIGHT_CLICK, true, false, rightClickTarget.mouseX, rightClickTarget.mouseY);//event = new ContextMenuEvent(RIGHT_CLICK, true, false, rightClickTarget as InteractiveObject, rightClickTarget as InteractiveObject); rightClickTarget.dispatchEvent(event); }// end if return; } } 

2、设置index.template.html文件

打开自己的Flex工程下的html-template文件夹下的index.template.html文件（右击-Open With-Text Editor），在var params = {};语句的下面添加下面的语句： 
params.wmode = "opaque";//屏蔽系统右键菜单的关键 
3、在主程序文件中引入

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx"   minWidth="955" minHeight="600" creationComplete="init(event)"><fx:Script><![CDATA[import flash.events.MouseEvent;import mx.controls.Menu;import mx.events.FlexEvent;import mx.events.MenuEvent;import tool.RightClickManager;private var mouseTarget:DisplayObject;private var menu:Menu;private var rightClickRegisted:Boolean = false;//初始化 protected function init(event:FlexEvent):void{ if (!rightClickRegisted) { maxNumText.text=rightClickRegisted.toString();RightClickManager.regist(); rightClickRegisted = true; } this.addEventListener(RightClickManager.RIGHT_CLICK,rightClickHandler); maxNumText.text+="init"; } //创建菜单项 private function createMenuItems():Array { var menuItems:Array = new Array(); var menuItem:Object; menuItem = new Object; menuItem.label = '刷新'; //菜单项名称 //menuItem.itemIcon = this.menu_SX;//菜单项图标 menuItems.push(menuItem); return menuItems; } //生成右键菜单 private function initMenu():void { menu = Menu.createMenu(this, createMenuItems(), false); //menu.iconField="itemIcon";//右键菜单的图标 //menu.labelField="label"; //右键菜单的名称 menu.variableRowHeight = true; menu.width=100; menu.addEventListener(MenuEvent.ITEM_CLICK, menuItemSelected); //右键菜单的事件 var point:Point = new Point(mouseX,mouseY); point = localToGlobal(point); menu.show(point.x,point.y); //显示右键菜单 maxNumText.text="initMenu"; } //删除右键菜单 private function removeMenu():void { if(menu!=null) { menu.hide(); menu.removeEventListener(MenuEvent.ITEM_CLICK,menuItemSelected); menu=null; } maxNumText.text="removeMenu"; } //菜单项点击事件 private function menuItemSelected(event:MenuEvent):void { var menuItem:Object = event.menu.selectedItem as Object; //…… switch(menuItem.label) { case "刷新": addLine(); break; // …… } } private function addLine():void { maxNumText.text="addLine"; } //控件右击事件 private function rightClickHandler(event:MouseEvent):void { //tree_onRightClicked(event); maxNumText.text="rightClickHandler0"; removeMenu(); initMenu(); maxNumText.text="rightClickHandler"; } ]]></fx:Script><fx:Declarations><!-- 将非可视元素（例如服务、值对象）放在此处 --></fx:Declarations><mx:Label id="maxNumText" x="0" y="10" name="bbb" text="test"/></s:Application>

效果图如附件。

注意：

1、刚发现的一些问题，使用自定义右键菜单后，无法对界面中的元素进行多选，即按住Ctrl键进行多选，去除jsp/html中的那行关键代码即可进行多选，但是无法使用自定义右键菜单了。暂无解决方案。

2、自定义右键后，无法在界面中输入中文，解决方案是：flex调用js的ui控件进行输入，输入完成后，调用flex方法传值。

3、项目中发现横向滚动条失效，纵向滚动条可用，但是鼠标滑轮滚动失效。解决方案：鼠标滚轮事件参考：http://blog.csdn.net/mygisforum/article/details/16904207

转自：http://www.jb51.net/article/36871.htm