Flex右键

由于项目需要，要把FLEX的右键菜单屏蔽掉，本想这种事应该早就有人去做了，应该很好解决，没想到捣鼓半天依然不是很完美。

 

第一种方法：

FLEX默认的是右键弹出他的那个菜单，我们自然而然就想到让他隐藏就好了，于是就有了下面的代码：


          var menu:ContextMenu = new ContextMenu();

          menu.hideBuiltInItems();

          this.contextMenu = menu;

希望是美好的，现实是残酷的，上面的操作只能做到剩下两项操作（设置，全局设置），如果你浏览器中的flashplayer装的是debugger版本，还会显示显示重绘区、调试这两项。

 

第二种方法：

这个方法用到Flex与JS的交互，也是网上转载比较多的可用的方法

其基本思路为: 

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.οnmοusedοwn=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" 
); 

ADOBE文档中对wmode的解释: 
Sets the Window Mode property of the SWF file for transparency, layering, and positioning in the browser. Valid values of wmode are window, opaque, and transparent. 

Set to window to play the SWF in its own rectangular window on a web page. 

Set to opaque to hide everything on the page behind it. 

Set to transparent so that the background of the HTML page shows through all transparent portions of the SWF file. This can slow animation performance. 

To make sections of your SWF file transparent, you must set the alpha property to 0. To make your application's background transparent, set the alpha property on the <mx:Application> tag to 0. 

The wmode property is not supported in all browsers and platforms. 

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


当然还有几个问题: 
1,在IE7以上中需要

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

//这里
} 
return false; 
} 

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

4.我在测试时如果将（我用的FlexBuilder)生成的文件放到别的目录下去跑，会有安全性问题，报#error 2060错误，是as与JS交互的安全性问题，我暂时的解决方法就是去adobe官网上把player的安全性设置了一下。

上面的注意问题一定要注意，我已经吃了不少苦头了。




我在IE8.0下测试可用，可是不知为什么在应用程序里嵌的ie里却不识别event.stopPropagation(); 百思不得其解。。只好另觅它法。

第三种方法：

在网上搜索一下发现这个有开源的库，外国人的开源精神就是好，地址为

http://code.google.com/p/rightclickmanager/downloads/detail?name=rightclickmanager-source-lib-0.1.rar

 

有这个库就方便多了，本来我以为他是响应click，试了一下发现其实是buttonDown，这正是我想到的哈哈。

具体用法就是将RightClickLib.swc放到自己的工程的libs下（我在FlexBuilder里是这么做的），然后写两句代码

import com.siloon.plugin.rightClick.RightClickManager;

在初始化函数中注册并添加响应函数：


RightClickManager.regist();


this.addEventListener(RightClickManager.RIGHT_CLICK, onRightClick);


private function onRightClick(event:MouseEvent):void

{

//Alert.show("right click");


Alert.show(""+event.stageX+"|"+event.stageY);

}

注意：

1.这个库其实也是按第二种方法的思路写的，所以也要改那个wmode的值为opaque，不然是没有效果的。

2.因为是开源的，大家可以去看源代码甚至是修改它以满足自己的需求，开源的确是个好东西，让开发人员更加省时省力，我想这也是国外为什么软件能发展那么迅速的原因吧，国内文档的共享都极其的有限。。我看到的网上的解决方法其实都是国外网站上的翻译而以，差距啊，希望有朝一日外国人要到中国网站来找解决方法哈哈。




我在IE8.0下测试通过，还没拿到程序去测，希望这回能完美解决，实在是不堪凌辱啊。。。希望这文章能对人有帮助。