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.                         {
  3.                                 RightClickManager.regist();
  4.                                
  5.                         }
复制代码
3.在控件里面添加右键事件如:
  1. list.addEventListener(RightClickManager.RIGHT_CLICK,onListRightClickHandler);
复制代码
  1. var menuRoot:Menu=Menu.createMenu(list,null,false);
  2.                         menuRoot.width=150;
  3.                         menuRoot.dataProvider=new ArrayCollection([{label:"label1",data:"data1"},
  4.                                 {label:"label2",data:"data2"}]);
  5.                         menuRoot.labelField="label";
  6.                        
  7.                         menuRoot.addEventListener(MenuEvent.ITEM_CLICK,listMenuItemClick);
  8.                        
  9.                         menuRoot.show(x,y);
复制代码
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("右键菜单");
}



你可能感兴趣的:(Flex)