FLEX右键菜单以及实现自定义的FLEX右键功能

在网上发现了一篇相关的BLOG,地址如下:

http://www.flex-flex.net/blog/article.asp?id=12

完全屏蔽FLEX右键菜单比当初想象的要难一些,因为大多数FLEX文档中仅仅介绍了如何隐藏一部分FLEX右键菜单,例如:

代码 复制 - 运行

varcontextMenu:ContextMenu=newContextMenu();
contextMenu.hideBuiltInItems();//隐藏一些内建的鼠标右键菜单项

但是这个功能不能隐藏"设置"和"关于"右键菜单,而在一些应用中,希望能够利用鼠标右键完成一些操作功能,例如绘图程序和游戏等,这时候右键菜单就是"欲除之而后快"了.但在FLEX中监听mouseDown捕获不了右键事件,而在ContextMenu的Select事件也无法屏蔽.

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

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

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

具体的实现为:
1,在FLEX所在的HTML增加(注意根据自己的OBJECTID更改"FlexTest")

<ｓｃｒｉｐｔ>
functiononNsRightClick(e){
if(e.which==3){
FlexTest.openRightClick();
e.stopPropagation();
}
returnfalse;
}
functiononIeRightClick(e){
if(event.button>1){
FlexTest.openRightClick();
parent.frames.location.replace(javaｓｃｒｉｐｔ:parent.falseframe);
}
returnfalse;
}
if(navigator.appName=="Netscape"){
document.captureEvents(Event.MOUSEDOWN);
document.addEventListener("mousedown",onNsRightClick,true);
}
else{
document.onmousedown=onIeRightClick;
}
</ｓｃｒｉｐｔ>

 2,修改FLEX的MXML

增加初始化和MOUSEOVER事件处理函数

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

增加MXｓｃｒｉｐｔ

importmx.events.MenuEvent;
importmx.controls.Alert;
privatevarmouseTarget:DisplayObject;
functioninit()
{
ExternalInterface.addCallback("openRightClick",openRightClick);
}
functiongetMouseTarget(event:MouseEvent):void
{
mouseTarget=DisplayObject(event.target);
}
functionopenRightClick():void
{
vare:MouseEvent=newMouseEvent(MouseEvent.MOUSE_DOWN,true,false,mouseTarget.mouseX,mouseTarget.mouseY);
mouseTarget.dispatchEvent(e);
}
functionshowMouseEvent(event)
{
if(event.buttonDown==true)
Alert.show("Left");
else
Alert.show("Right");
}
<mx:Imagex="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",////OBJECTID
"wmode","opaque",//////////////////////注意:这里是关键
"quality","high",
"bgcolor","#869ca7",
"name","FlexTest",
"allowｓｃｒｉｐｔAccess","sameDomain",
"type","application/x-shockwave-flash",
"pluginspage","http://www.adobe.com/go/getflashplayer"
);

 

ADOBE文档中对wmode的解释:
SetstheWindowModepropertyoftheSWFfilefortransparency,layering,andpositioninginthebrowser.Validvaluesofwmodearewindow,opaque,and

transparent.

SettowindowtoplaytheSWFinitsownrectangularwindowonawebpage.

Settoopaquetohideeverythingonthepagebehindit.

SettotransparentsothatthebackgroundoftheHTMLpageshowsthroughalltransparentportionsoftheSWFfile.Thiscanslowanimationperformance.

TomakesectionsofyourSWFfiletransparent,youmustsetthealphapropertyto0.Tomakeyourapplicationsbackgroundtransparent,setthealpha

propertyonthe<mx:Application>tagto0.

Thewmodepropertyisnotsupportedinallbrowsersandplatforms.

现在就可以灵活的使用鼠标右键功能了!在IE6和FF2.0中测试通过

当然还有几个问题:
1,据JOVE的介绍,在IE7中需要添加

event.stopPropagation();
event.cancelBubble=true;

 因此还需要对浏览器进行一下判断,我没有装IE7,也就没有测,需要的朋友可以测试一下

2,一些有用的右键菜单,例如TEXT中能够自动弹出剪贴复制等功能的右键菜单,也没有了,真是有一利必有一弊啊!不过这个还比较简单,可以再模拟一个ContextMenu的Select事件.
3,对初始化流程应再进行一些改进,以保证FLEX的加载和外部接口建立成功后,再加以使用.