`

flex自定义右键菜单

    博客分类:
  • flex
阅读更多

,在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 "
);

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的加载和外部接口建立成功后,再加以使用.

分享到:
评论

相关推荐

    flex自定义右键菜单 完全屏蔽

    标题提到的"flex自定义右键菜单 完全屏蔽"是指在Flex应用程序中,不仅实现对默认右键菜单的完全屏蔽,还允许开发者根据自己的需求创建并应用自定义的右键菜单。这种方法避免了使用JavaScript进行跨域通信来实现屏蔽...

    Flex自定义右键菜单

    在Flex开发中,自定义右键菜单是一项常见的需求,它能为用户界面提供更丰富的交互体验。Flex是一款基于ActionScript 3.0的开源框架,主要用于构建富互联网应用程序(RIA)。在这里,我们将深入探讨如何在Flex中实现...

    flex 自定义右键菜单

    本文将深入探讨两种实现Flex自定义右键菜单的方法:系统右键菜单的扩展以及完全自定义的右键菜单。 1. **系统右键菜单** 系统右键菜单是在Flex应用中利用ActionScript 3.0直接添加到UI组件上的菜单项。这种实现...

    flex 自定义右键菜单 多级右键菜单

    在Flex开发中,自定义右键菜单和实现多级右键菜单是一项常见的需求,它能够为用户界面提供更丰富的交互体验。Flex是一个基于ActionScript 3.0的开放源代码框架,用于构建富互联网应用程序(RIA)。下面我们将深入...

    Flex4自定义右键菜单源码.rar

    描述中提到的“对初学者有用,一个简单的flex自定义右键菜单”表明这个示例是为初学者设计的,它简化了自定义右键菜单的复杂性,让初学者可以快速上手。通常,自定义右键菜单需要处理鼠标事件,创建上下文菜单,并将...

    Flex自定义右键菜单具体实现

    自定义右键菜单在flex的实现想必有很多朋友都没有尝试过吧,下面与大家分享下如何实现,具体代码如下

    flex添加右键菜单实例

    在给定的实例中,我们看到如何在Flex应用中创建并添加自定义的右键菜单。下面将详细解释这个实例中的关键知识点。 首先,我们需要导入必要的类库,包括`mx.core.ContextualClassFactory`用于创建ContextMenuItem,`...

    Flex右键菜单 flex tree 右键菜单 源码

    在Flex中,右键菜单是用户交互的重要组成部分,特别是在数据可视化和树形结构的数据展示中,如Flex Tree组件。本文将深入探讨如何在Flex中实现右键菜单,并结合提供的源码进行分析。 1. Flex右键菜单: Flex中的...

    flex屏蔽系统右键菜单 & 自定义菜单

    4. 自定义右键菜单(ContextMenu类):Flex提供了`ContextMenu`类,我们可以使用它来创建自定义的右键菜单。首先创建一个`ContextMenu`实例,然后添加`ContextMenuItem`对象作为菜单项。每个`ContextMenuItem`可以有...

    flex实现右键菜单

    5. **应用自定义右键菜单** 在需要的地方使用`CustomContextMenu`类,并将其关联到组件: ```actionscript someComponent.contextMenu = new CustomContextMenu(); ``` 通过以上步骤,我们可以在Flex项目中...

    Flex添加右键菜单

    在Flex开发中,有时我们需要为用户界面添加自定义的右键菜单,以便提供更多的交互功能。本教程将指导你如何在Flex项目中实现这一功能,主要涉及以下知识点: 1. **右键菜单库的引入**: 首先,你需要下载一个名为`...

    flex自制右键菜单

    在Flex开发中,自定义右键菜单是一项常见的需求,它能提供更为丰富的用户交互体验,同时也能更好地符合应用的功能需求。本项目标题为"flex自制右键菜单",描述中提到作者从网上获取了相关代码并进行改写,实现了屏蔽...

    Flex 实现右键菜单

    这段代码会阻止默认的右键菜单弹出,为我们的自定义右键菜单提供空间。 接下来,我们将构建自定义的右键菜单。在Flex中,我们可以使用`ContextMenu`类来创建菜单,而`ContextMenuItem`类则用于创建菜单项。如果需要...

    Flex右键菜单例子

    标题中的"Flex右键菜单例子"表明这是一个关于如何在Flex项目中实现自定义右键菜单的示例。在Flex中,自定义右键菜单可以提供更丰富的用户体验,同时可以根据应用需求定制功能,比如在地图应用中添加特定的操作选项。...

    FLEX 完全屏蔽系统默认右键菜单,实现自定义菜单

    完全屏蔽flex自带的右键菜单,实现自定义右键菜单,附件有完整可运行的例子。 这个问题折腾了一天多,在网上搜了很多资料,几乎都是一样的,转来转去,且讲的不明不白。这里我提供了可运行的全部代码,让你轻松搞定...

    自定义Flex右键菜单

    在IT行业中,自定义Flex右键菜单是一项常见的需求,它涉及到用户交互体验的优化和界面定制化。Flex是一个基于ActionScript 3.0的开源框架,用于构建富互联网应用程序(RIA)。在这里,我们主要探讨如何在Flex项目中...

    Flex自定义右健菜单

    本文将介绍两种方法来实现Flex自定义右键菜单。 方法一: 1. **屏蔽内置右键菜单**:首先,我们需要在HTML模板文件(如`Index.template.html`)中引入两个JavaScript文件,`swfobject.js`和`rightClick.js`,用于...

    Flex 3完整的右键自定义菜单Demo

    在压缩包中的"RightClickDemo"文件中,包含了完整的示例代码和运行资源,可以帮助开发者更直观地理解和学习如何在Flex 3环境中实现自定义右键菜单。通过分析和运行这个Demo,你可以了解每个部分的功能,以及它们是...

Global site tag (gtag.js) - Google Analytics