flex 鼠标右键事件 和右键菜单的实现 

flex 鼠标右键事件
1.如果你是Desktop Application
监听事件的MouseEvent.RIGHT_CLICK事件 
比如对某个控件a进行监控右键点击事件 
a.addEventListener(MouseEvent.RIGHT_CLICK,func); 
鼠标的其他事件也可以监听，具体见http://livedocs.adobe.com/flex/3_cn/langref/flash/events/MouseEvent.html 
2.如果是Web Appliction（麻烦了！）
其基本思路为:

1,在FLEX中利用外部接口注册一个函数, 作为接收外部(HTML)右键事件的入口
2,在FLEX应用所在的HTML中拦截鼠标右键事件,调用FLEX外部函数,并取消事件的广播,以阻止事件到达FLEX应用.
3,在FLEX应用程序上监听mouseOver事件,并记录当前鼠标所在对象
4,当入口函数接收到HTML发送的右键事件后,模拟生成一个鼠标右键事件(buttonDown = false), 并发送到当前对象
5,在对象的mouseDown处理函数中,根据buttonDown的标志,分别处理鼠标左右键事件


这个思路比较清晰可行, 鼠标右键事件的流程为:

HTML鼠标右键事件----FLEX外部函数-----模拟的鼠标右键事件------相应的处理函数

具体的实现为:

1, 在FLEX所在的HTML增加
<script>
function onNsRightClick(e){
if(e.which == 3){
   FlexTest.openRightClick();
   e.stopPropagation(); 
}
return false;
}

function onIeRightClick(e){
if(event.button > 1){
   FlexTest.openRightClick();
   parent.frames.location.replace('javascript: parent.falseframe');
}
return false;
}


if(navigator.appName == "Netscape"){
document.captureEvents(Event.MOUSEDOWN); 
document.addEventListener("mousedown", onNsRightClick, true); 
}
else{
document.onmousedown=onIeRightClick; 
}

</script>

2, 修改FLEX的MXML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()" mouseOver="getMouseTarget(event)" >

private var mouseTarget:DisplayObject;
function init()
{
ExternalInterface.addCallback("openRightClick", openRightClick);
}


function getMouseTarget(event:MenuEvent):void
{
mouseTarget = DisplayObject(event.target);
}

function openRightClick():void
{
var e:MouseEvent = new MouseEvent(MouseEvent.MOUSE_DOWN, true, false, mouseTarget.mouseX, mouseTarget.mouseY);
mouseTarget.dispatchEvent(e);
}

function showMouseEvent(event)
{
if(event.buttonDown == true)
   Alert.show("Left");
else
   Alert.show("Right");
}


<mx:Image x="0" y="10" id="bbb" name="bbb" source="res/15.jpg" mouseDown="showMouseEvent(event)" height="247"/>


在修改完后,满怀信心的进行测试,结果右键菜单还能够出现!试了很多办法也不行,幸亏我的同事赵辉发现了解决方法,在这里向他表示感谢!

具体的方法就是修改wmode参数, 将wmode设置为opaque或transparent都可以达到这个效果
AC_FL_RunContent(
   "src", "playerProductInstall",
   "FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
   "width", "100%",
   "height", "100%",
   "align", "middle",
   "id", "FlexTest",
   "wmode", "opaque", //////////////////////注意:这里是关键
   "quality", "high",
   "bgcolor", "#869ca7",
   "name", "FlexTest",
   "allowScriptAccess","sameDomain",
   "type", "application/x-shockwave-flash",
   "pluginspage", "http://www.adobe.com/go/getflashplayer"
);





flex 鼠标右键菜单添加





方案1


大家应该知道，flex右键菜单默认是adobe自己flash的有关设置的，如果用flex 自带的右键菜单会有几个选项去不掉，这时候要用到一个貌似是第三方的工具类RightClickManager类，这个类的原理是截取flex 自身通过html的右键事件，然后定义一个新的右键事件，具体不详述，感兴趣的朋友可以分析一下RightClickManager类
具体办法：
1.工程引入RightClickManager类，搜索引擎一下可以在网上下到。
2.在自己的application里面注册右键事件，我是在 creationComplete="initrightClick()" 方法里面：




    

  1. function initrightClick()
    2. 

  2.                         {
    3. 

  3.                                 RightClickManager.regist();
    4. 

  4.                                
    5. 

  5.                         }
    6. 


复制代码


3.在控件里面添加右键事件如：




    

  1. list.addEventListener(RightClickManager.RIGHT_CLICK,onListRightClickHandler);
    2. 


复制代码




    

  1. var menuRoot:Menu=Menu.createMenu(list,null,false);
    2. 

  2.                         menuRoot.width=150;
    3. 

  3.                         menuRoot.dataProvider=new ArrayCollection([{label:"label1",data:"data1"},
    4. 

  4.                                 {label:"label2",data:"data2"}]);
    5. 

  5.                         menuRoot.labelField="label";
    6. 

  6.                        
    7. 

  7.                         menuRoot.addEventListener(MenuEvent.ITEM_CLICK,listMenuItemClick);
    8. 

  8.                        
    9. 

  9.                         menuRoot.show(x,y);
    10. 


复制代码


listMenuItemClick方法里面写menuitem选中的事件
4.最后一步要在工程的编译输出文件夹该application对应的html中修改Actionscript中定义的一个属性params.wmode="transparent";我记得以前写html的时候这句话的意思是让flash的背景变透明，加了这个属性的定义后我们定义的右键菜单才会出来。需要注意的是如果在输出文件夹里的html修改的话，每次对代码保存flex都会重新编译，所以会被后来编译的覆盖掉。
最简单的方法是在生成html的模版里面修改，就是工程里面的html-template文件夹，里面的index.template.html这样的话，编译后的输出文件夹里面的所有的html文件都会添加这个属性的定义





方案2 


ComponentRightMenu 自己写的一个扩展类 可以快速实现flex 右键菜单功能 


import flash.ui.ContextMenu;
 import mx.core.UIComponent;
 
 public class ComponentRightMenu {
 
 private var cm:ContextMenu;
 private var uic:UIComponent;
 private var labels:Array;
 private var funs:Array;
 private var seporators:Array;
 
 public function ComponentRightMenu(_uic:UIComponent, _labels:Array, _funs:Array, _seporators:Array) {
 this.uic = _uic;
 this.labels = _labels;
 this.funs = _funs;
 this.seporators = _seporators;
 buildComponentMenu(_uic);
 }
 
 private function buildComponentMenu(_uic:UIComponent):void {
 if(labels == null || funs == null) return void;
 var menuItems:Array = new Array();
 if(labels.length > 0) {
 for(var i:int = 0; i < labels.length; i++) {
 var sep:Boolean = false;
 var fun:Function = null;
 if(seporators != null && seporators.length >= labels.length) sep = seporators[i];
 if(funs != null && funs.length >= labels.length) fun = funs[i];
 menuItems.push(new MenuItem (labels[i], sep, fun).menuItems);
 }
 setMenu(menuItems);
 }
 _uic.contextMenu = this.menu;
 }
 
 private function get menu():ContextMenu {
 return cm;
 } 
 private function setMenu(menuItems:Array):void {
 cm = new ContextMenu();
 cm.hideBuiltInItems();
 cm.customItems = menuItems;
 }





案例:


new ComponentRightMenu(this,["右键"],[ mapReset],[false]);


public function mapReset(event:ContextMenuEvent):void
{ 
　　Alert.show("右键菜单");
}














		

		
posted @ 
2012-03-17 15:06 
opengis2012 
Views(1581) 
Comments(0) 
Edit 
收藏 
举报


	

	
	








    
    

    
    

    

        

    

        

            
                
                
            
        

    

    

    

    







	

	


	
	

	

	

	





    

        Using GIS to Change the World! www.gis-open-source-ogc.com