Opera下自定义右键菜单的研究

最新推荐文章于 2024-09-05 09:29:28 发布

转载最新推荐文章于 2024-09-05 09:29:28 发布 · 1.7k 阅读

文章标签：

#opera #fckeditor #function #yui #button #google

jQuery 专栏收录该内容

56 篇文章

订阅专栏

本文探讨了Opera浏览器因不支持oncontextmenu事件导致自定义右键菜单的问题。介绍了FCKEditor通过检测鼠标右键并利用透明按钮遮挡,及YUI采用Ctrl+左键模拟右键点击的解决方案。

Opera是一个来自挪威的浏览器，有着优秀的缓存机制，浏览网页速度很快，有着自己庞大的粉丝群。但是opera并没有支持上下文菜单事件，也就是说我们通常使用的依靠在页面中重写oncontextmenu事件来实现自定义右键菜单的方法不会工作。那么，有没有别的方法来实现自定义菜单呢？

我们来看看三个著名的产品(Fckeditor、YUI、Google Doc)怎么解决opera没有oncontextmenu事件这个问题：

Fckeditor:Fckeditor这个开源的编辑器我想不用多介绍了吧，它的最新版本已经支持了opera。那么它是怎么处理右键菜单的呢？分析源码可以知道，它注册了onmousedown事件，并且判断鼠标按下的是不是右键，如果是就显示自定义菜单。这样看似很完美，但是有两个致命的弱点：1.默认情况下opera是不检测鼠标右键点击的，也就是右键按下时根本不触发mousedown事件。除非在“工具”-“首选项”-”高级”-”内容”-“Javascript选项”中勾选“允许脚本检测右键单击”；2.opera自身的上下文菜单会跟自定义菜单一起出现，也就是说无法preventDefault。这个问题解决起来有一点点巧妙，经过实验我们可以发现，opera下在type等于button的input上点击右键不会出现系统上下文菜单，于是我们可以在mousedown时在鼠标下放一个几乎透明的type=button的input，再在mouseup的时候隐藏这个button。

YUI的MENU组件:YUI是一个先进的界面库，功能强大，使用简便。那么他是怎么解决这个问题的呢？相比于FCKEditor，YUI换了另外一种思路，既然Opera默认不支持检测右键点击，那就用左键点击来代替总可以吧，但是这样显然会干扰用户正常操作，于是YUI又加了一条规则，按下ctrl键的同时点击左键才等同于右键。“Hold down the control key and click with the left mouse button.”

Google Doc:Google出品的web office套件。Google的技术不用怀疑，那么他是怎么解决这个问题的呢？答案是：既然不能完美解决，干脆就不解决。反正Google Doc的所有操作都不是只有右键菜单才能完成。不愧是Google！

本文提到的两种解决方案实现代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Jerry Qu's HTML document</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <mce:script type="text/javascript"></mce:script> </head> <body style="height:100%;width:100%"> <mce:script type="text/javascript"></mce:script> <div id="menu" style="font-size:12px;width:100px;height:160px;border:1px solid #ccc;position:absolute;display:none"> 自定义菜单 </div> </body> </html>

Trackback： http://www.qgy18.com/2008/08/opera_contextmen/