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:初始化注册监听函数
2:函数的简单实现:
3:设置全局捕获
注意这段代码的位置,要是他在swf通过swfobject加载进页面后再执行。这里我把他放在了html的最后,"${application}请不要迷惑 因为我改的是Flex项目里的index.template.html
这些就是精简的RightClick 只是为了描述清楚它的原理 在实际应用中请自行修改。
更正:如果在页面加载时就执行这端代码的话 浏览器会假死,估计是这个div拦截了所有的事件。正确做法可以把这段代码放到鼠标响应事件里。