首先需要修改index.template.html生成的静态模板页面,使用js监听document.onmousedown事件,并调用Flex里暴露的方法,代码如下:(Index为生成的flash对象id)
function onNsRightClick(e){
if(e.which == 3){
Index.openRightClick();
e.stopPropagation();
}
return false;
}
function onIeRightClick(e){
if(event.button > 1){
Index.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;
}
第二步,还需要修改index.template.html默认生成flash的脚本,在AC_FL_RunContent方法调用里添加一行"wmode", "opaque",参数设置,这是关键。
最后,在Flex端注册暴露能被js调用的函数,ExternalInterface.addCallback("openRightClick", openRightClick);我的是写在Application的creationComplete事件里的,另外增加Application的mouseOver、mouseDown事件,在showMouseEvent方法里就能自定义模拟显示右键菜单了,mxml代码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
verticalGap="0" scroll="false"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
creationComplete="init()" initialize="initApp(event)"
mouseOver="getMouseTarget(event)" mouseDown="showMouseEvent(event)" >
<mx:Style source="/styles/index/css/style.css"></mx:Style>
<mx:HTTPService id="httpsLogin" url="/Flex/Login.aspx" method="get" showBusyCursor="true" result="httpsLogin_Result()" >
<mx:request xmlns="">
<username>
{this.txtUserName.text}
</username>
<password>
{this.txtPassword.text}
</password>
</mx:request>
</mx:HTTPService>
<mx:Script>
<![CDATA[
import mx.managers.ICursorManager;
import mx.managers.CursorManagerPriority;
import mx.controls.Alert;
import mx.managers.CursorManager;
import org.bytearray.gif.player.GIFPlayer;
import org.bytearray.gif.events.FileTypeEvent;
import org.bytearray.gif.events.GIFPlayerEvent;
import org.bytearray.gif.events.FrameEvent;
import org.bytearray.gif.events.TimeoutEvent;
[Embed(source="/styles/index/images/cursor.gif")]
private var cursorHand : Class;//图标
private var mouseTarget:DisplayObject;
//public var myGIFPlayer:GIFPlayer = new GIFPlayer();
public function httpsLogin_Result() : void
{
var rs : String = httpsLogin.lastResult.result;
if ( rs=="true")
{
mx.controls.Alert.show("登陆成功!","提示信息", Alert.OK, this,null,null, Alert.YES);
return;
}
mx.controls.Alert.show(rs,"提示信息",Alert.OK,this,null,null, Alert.OK);
}
public function init():void
{
var date:Date = new Date();
swfHeader.source += "&daytime=" + (date.getHours() >= 18 ? "no" : "yes");
ExternalInterface.addCallback("openRightClick", openRightClick);
}
private function getMouseTarget(event:MouseEvent):void
{
mouseTarget = DisplayObject(event.target);
}
private function openRightClick():void
{
var e:MouseEvent = new MouseEvent(MouseEvent.MOUSE_DOWN, true, false, mouseTarget.mouseX, mouseTarget.mouseY);
mouseTarget.dispatchEvent(e);
}
private function showMouseEvent(event:MouseEvent):void
{
if(event.buttonDown == true)
Alert.show("Left");
else
Alert.show("Right");
}
]]>
</mx:Script>
<mx:SWFLoader id="swfHeader" width="700" height="255" source="/style/blog/mobile.swf?menu=true&currentState=sunny&tempVar=11">
</mx:SWFLoader>
<mx:HBox styleName="nav" width="960" height="58" horizontalGap="50" paddingTop="25">
<mx:LinkButton left="10" click="ExternalInterface.call('function(){location.reload();}')" label="首页"/>
<mx:LinkButton label="随笔"/>
<mx:LinkButton label="相册"/>
<mx:LinkButton label="留言"/>
</mx:HBox>
<mx:VBox width="960" visible="false">
<mx:Panel width="364" height="234" backgroundAlpha="2" layout="absolute" fontSize="12" title="个人档案">
<mx:Label x="47" y="37" text="用户名:"/>
<mx:TextInput x="110" y="37" id="txtUserName"/>
<mx:Label x="47" y="89" text="密 码:"/>
<mx:TextInput x="110" y="89" id="txtPassword"/>
<mx:Button x="110" y="141" click="httpsLogin.send()" label="登陆"/>
</mx:Panel>
<mx:Panel width="364" height="234" layout="absolute" fontSize="12" title="日历">
<mx:Label x="47" y="37" text="用户名:"/>
<mx:Button x="110" y="141" click="httpsLogin.send()" label="登陆"/>
</mx:Panel>
</mx:VBox>
</mx:Application>
凡事有利就有弊,由于屏蔽了右键菜单,TextInput文本框默认也没有粘贴的选项了,由于设置了flash的wmode为opaque,导致一些中文输入的反作用,所以没有特别的需求还是不屏蔽到默认右键菜单,如果要加上一些自己定义的上下文菜单,Flex内也很简单,在Application的上下文内添加条不可选的菜单项实现如下:
// 隐藏一些内建的鼠标右键菜单项
this.contextMenu.hideBuiltInItems();
var contextMenuItem : ContextMenuItem = new ContextMenuItem("Powered By: Jonllen");
contextMenuItem.enabled = false;
contextMenu.customItems.push(contextMenuItem);
this.contextMenu.customItems.push(contextMenuItem);