jQuery and ContextMenu plugin - right click in Opera

Recently, I faced the task of implementing the context menu on the right mouse click in the admin panel of one project. To solve this problem, I found a plugin for jQuery - contextMenu , demonstration . Looked at an example, downloaded, screwed and started checking. IE is fine, FF is fine, Safari is fine, Opera does not work!

And so, the problem is:
Opera does not allow you to create your context menu and track the right mouse click.

Decision:
As you know (or do not know), the Opera has JavaScript settings (Tools - Settings - Advanced - Content - JavaScript settings), there is a property “Allow to control the right mouse button”. Clicking on it we have the result - JS catches the right-click event and shows the context menu, but the standard menu falls on top of it. A little googling found a solution to his problem:

// , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .

1. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
2. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
3. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
4. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
5. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
6. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
7. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
8. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
9. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
10. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
11. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
12. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
14. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
15. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
16. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
17. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
18. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
19. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
20. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
21. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
22. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
23. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
24. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
26. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .
27. // , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .

// , if (navigator.appName.indexOf( "Opera" )!=-1){ // ( function (){ // , addEventListener( 'mousedown' , function (e){ // - if ( e && e.button == 2 ){ cancelMenu(e); return false ; } }, true ); var overrideButton; function cancelMenu(e){ if (!overrideButton){ var doc = e.target.ownerDocument; overrideButton = doc.createElement( 'input' ); overrideButton.type= 'button' ; (doc.body||doc.documentElement).appendChild(overrideButton); } overrideButton.style= 'position:absolute;top:' +(e.clientY-2)+ 'px;left:' + (e.clientX-2)+ 'px;width:5px;height:5px;opacity:0.01' ; } })( true , 1000 ); } * This source code was highlighted with Source Code Highlighter .

')
The script creates a button on the page that hides the standard Opera context menu. Screwing this script to the admin panel, I got the following (look at the Opera). Now enjoy and use.

PS In order to avoid unnecessary questions, the script is used only in the admin panel and for this reason it was considered not terrible to ask the user to allow tracking of the click of the right mouse button.