Flex自定义右键菜单的终极实现

Flex的右键菜单始终都是开发者所诟病的一个功能。

为了能够屏蔽原生菜单实现真正的“自定义”。网上也流传了几个版本。其中RightClick.js版算是比较全面的。现在就分析一下RightClick的实现原理。

原理：这个其实大家都知道。通过在swf“宿主”页面中写js拦截浏览器的鼠标事件，并通过Flex与js通信的功能，通知Flex。

这里的主要的难点就是在拦截html鼠标事件的不同浏览器兼容性的问题。

首先，右键的弹出菜单有两个事件，一个是鼠标的事件，另一个是oncontextmenu事件。注册oncontextmenu事件在处理函数中return false。就可以阻止html的菜单。然后在鼠标事件中，阻止事件传播，使Flex无法接受到该事件。这里需要注意的是 IE中的事件event是全局的。Firefox中是以函数参的形式。另外在Firefox中注册鼠标事件时，一定要使用addEventlistener的方式，并且要使用捕获的方式。这样才能在事件到达swf所在的元素前“拦截”到该事件。在Firefox里很简单只要e.stopPropagation()就可以了。IE就麻烦了，因为在IE中只有冒泡没有捕获阶段，怎么办呢？通过分析RightClick中的代码，发现他在object元素上又包了一个<div>做container。然后，在这个div上注册的onmousedown，在响应事件里有一个setCapture(),经过百度才知道关键就是这个setCapture().他的作用是是目标的对象拥有捕获事件的能力，并被全文档继承，有一个boolean参，true的话 该元素下的所有子元素都不会响应事件。看明白了吧。在swf所在object上包裹一个<div>并将其setCapture那么flex就不会接受到任何事件了从而起到了屏蔽鼠标右键的作用。当然不要忘了当鼠标按键抬起时要releaseCapture（）。不然你的flex就无法和鼠标交互了。

部分代码如下：

1：初始化注册监听函数

写道

if(navigator.appName=="Microsoft Internet Explorer"){
  document.onmousedown=onRightMouseDownForIE;
  document.oncontextmenu=stopContextMenu;
}else if(navigator.appName=="Netscape"){
  document.oncontextmenu=stopContextMenu;
  window.addEventListener("mousedown",onRightMouseDownForNS, true);

}

  2：函数的简单实现：

写道

function onRightMouseDownForNS(e){
  if (e.stopPropagation) e.stopPropagation();
  if(e.witch==2)
    ...........
   return false;
}

function onRightMouseDownForIE(){
  if(event.button==4)
   .........
  return false;
}
function stopContextMenu(e){

  return false;
}

 3：设置全局捕获

写道

var t=document.getElementById("${application}");
t.setCapture();

  注意这段代码的位置，要是他在swf通过swfobject加载进页面后再执行。这里我把他放在了html的最后，"${application}请不要迷惑 因为我改的是Flex项目里的index.template.html

这些就是精简的RightClick 只是为了描述清楚它的原理 在实际应用中请自行修改。

更正：如果在页面加载时就执行这端代码的话 浏览器会假死，估计是这个div拦截了所有的事件。正确做法可以把这段代码放到鼠标响应事件里。