Opera is a Norwegian browser with an excellent caching mechanism, which allows you to browse webpages quickly and has a large fan base. However, opera does not support context menu events, that is, I
Generally, the method that uses the oncontextmenu event in the page to implement the custom right-click menu does not work. Is there any other way to implement custom menus?
Let's take a look at how the three famous products (FCKeditor, Yui, and Google doc) solve the problem that opera does not have the oncontextmenu event:
FCKeditor: FCKeditor
I don't want to introduce this open-source editor. The latest version of the Editor supports opera. So how does it process the right-click menu? You can see the source code for analysis. It registers
Onmousedown event, and judge whether the right-click button is clicked. If yes, the custom menu is displayed. This seems perfect, but it has two fatal weaknesses: 1. opera by default
Right-click is not detected, that is, the mousedown event is not triggered when the right-click button is clicked. Unless in "Tools"-"Preferences"-"advanced"-"content"-"Javascript
Select "Allow script detection right-click" in "option". 2. The context menu of opera will appear with the custom menu, that is, preventdefault cannot be selected. Solution to this problem
After experiment, we can find that the system context menu does not appear when you right-click the input with the type equal to the button in opera, so we can
When mousedown, place the mouse over an almost transparent type = button input, and then hide the button when mouseup.
Yui
Menu component: Yui is an advanced interface library with powerful functions and ease of use. So how does he solve this problem? Compared with FCKeditor, Yui has another idea:
However, opera does not support right-click detection by default, so you can use the left-click button instead of the total, but this will obviously interfere with normal user operations, so Yui adds a rule, press ctrl
The left-click button is equivalent to the right-click button. "Hold down the control key and click with the left mouse
Button ."
Google Doc: Google's Web Office suite. Google does not have to worry about its technology. How does Google solve this problem? The answer is: Since it cannot be solved perfectly, it will not be solved. All operations of Google doc are not completed only by right-click menu. Google!
Implementation of the two solutions mentioned in this Article Code <! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en"> <br/> <HTML> <br/> <pead> <br/> <title> jerry Qu's HTML document </title> <br/> <meta name = "generator" content = "editplus"> <br/> <meta name = "author" content = ""> <br/> <meta name = "keywords" content = ""> <br/> <meta name = "Description" content = ""> <br/> <MCE: script Type = "text/JavaScript"> <! -- <Br/> var $ = function (s) {return document. getelementbyid (s) }; <br/> var showmenu = function (e) {<br/> var MS = $ ("menu "). style; <br/> MS. display = "Block"; <br/> MS. top = (E | event ). clienty) + "PX"; <br/> MS. left = (E | event ). clientx) + "PX"; <br/>}; <br/> window. onload = function () {<br/> If (window. opera) {<br/> document. body. onmousedown = function (e) {<br/> If (E. button = 2) {// If Detection is enabled, right-click <br/> V Ar BTN; <br/> if ($ ("btnopera") {<br/> BTN = $ ("btnopera "); <br/>} else {<br/> BTN = document. createelement ("input"); <br/> BTN. id = "btnopera"; <br/>}< br/> BTN. type = "button"; <br/> var BS = BTN. style; <br/> BS. display = "Block"; <br/> BS. zindex = "9999"; <br/> BS. opacity = "0.01"; // to make the button almost transparent <br/> BS. height = "20px"; <br/> BS. width = "20px"; <br/> BS. top = (E | event ). clientY-5) + "PX"; <br/> B S. left = (E | event ). clientX-5 () + "PX"; <br/> BS. position = "absolute"; <br/> document. body. appendchild (BTN); <br/>} else {<br/> $ ("menu "). style. display = "NONE"; <br/>}< br/>}; <br/> document. body. onmouseup = function (e) {<br/> If (E. button = 2) {<br/> $ ("btnopera "). style. display = "NONE"; <br/> showmenu (E); <br/>} else if (E. ctrlkey) {// press Ctrl <br/> showmenu (E); <br/>}< br/>}; <br/>} else {<br/> d Ocument. Body. oncontextmenu = function (e) {<br/> showmenu (E); <br/> return !! 0; <br/>}; <br/> document. body. onclick = function () {<br/> $ ("menu "). style. display = "NONE"; <br/>}; <br/>}</P> <p> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body style = "height: 100%; width: 100%"> <br/> <MCE: script Type = "text/JavaScript"> <! -- <Br/> If (window. opera) {<br/> document. write ("in windows, when the opera user presses Ctrl, click the left mouse button instead of right-clicking to view the custom menu"); <br/>} else {<br/> document. write ("you are not using opea, you can right-click to view the custom menu"); <br/>}</P> <p> // --> </MCE: SCRIPT> <br/> <Div id = "menu" style = "font-size: 12px; width: 100px; Height: 160px; Border: 1px solid # CCC; position: absolute; display: none "> <br/> custom menu <br/> </div> <br/> </body> <br/> </ptml>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
