屏蔽Flex右键，并实现自定义右键菜单

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

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

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

在网上发现了一篇相关的BLOG,地址如下:
http://www.flex-flex.net/blog/article.asp?id=12

其基本思路为:

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


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

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

具体的实现为:

1, 在FLEX所在的HTML增加(注意根据自己的OBJECT ID更改"FlexTest")
<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

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

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

增加MX SCRIPT

import mx.events.MenuEvent;
import mx.controls.Alert;
 
private var mouseTarget:DisplayObject;
function init()
{
ExternalInterface.addCallback("openRightClick", openRightClick);
}

function getMouseTarget(event:MouseEvent):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",            //// OBJECT ID
  "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,据JOVE的介绍,在IE7中需要添加
  event.stopPropagation();
  event.cancelBubble = true;
  因此还需要对浏览器进行一下判断,我没有装IE7,也就没有测,需要的朋友可以测试一下
2,一些有用的右键菜单,例如TEXT中能够自动弹出剪贴复制等功能的右键菜单,也没有了,真是有一利必有一弊啊! 不过这个还比较简单,可以再模拟一个ContextMenu的Select事件.
3, 对初始化流程应再进行一些改进,以保证FLEX的加载和外部接口建立成功后,再加以使用.

评论

2 楼 anreddy 2010-03-22  

请参考下面的例子
<?xml version="1.0"?>
<!-- events/StoppingPropagation.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init(event);">
<mx:Script><![CDATA[
import mx.controls.Alert;
import flash.events.MouseEvent;
import flash.events.Event;
public function init(e:Event):void {
p1.addEventListener(MouseEvent.MOUSE_DOWN, showAlert);
tw1.addEventListener(MouseEvent.MOUSE_DOWN, showAlert);
tw1.addEventListener(Event.CLOSE, closeWindow);
p2.addEventListener(MouseEvent.MOUSE_DOWN, showAlertWithoutStoppingPropagation);
tw2.addEventListener(MouseEvent.MOUSE_DOWN, showAlertWithoutStoppingPropagation);
tw2.addEventListener(Event.CLOSE, closeWindow);
}
public function showAlert(e:Event):void {
Alert.show("Alert!\n" + "Current Target: " + e.currentTarget + "\n" +
"Phase: " + e.eventPhase);
e.stopImmediatePropagation();
}
public function showAlertWithoutStoppingPropagation(e:Event):void {
Alert.show("Alert!\n" + "Current Target: " + e.currentTarget + "\n" +
"Phase: " + e.eventPhase);
}
public function closeWindow(e:Event):void {
p1.removeChild(tw1);
}
]]></mx:Script>
<mx:Panel id="p1" title="Stops Propagation">
<mx:TitleWindow id="tw1"
width="300"
height="100"
showCloseButton="true" title="Title Window 1"
>
<mx:Button label="Click Me"/>
<mx:TextArea id="ta1"/>
</mx:TitleWindow>
</mx:Panel>
<mx:Panel id="p2" title="Does Not Stop Propagation">
<mx:TitleWindow id="tw2"
width="300"
height="100"
showCloseButton="true"
title="Title Window 2"
>
<mx:Button label="Click Me"/>
<mx:TextArea id="ta2"/>
</mx:TitleWindow>
</mx:Panel>
</mx:Application>

1 楼 sungptxy 2009-08-02  

在哪加  event.stopPropagation();
  event.cancelBubble = true; 啊