By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,793 Members | 1,252 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,793 IT Pros & Developers. It's quick & easy.

On right click event

100+
P: 129
Hello friends,
I want to bulid a page that is restricted with right click. That means, any where on page right click is restricted. How to do that?
If possible help me with the code?
Sep 25 '08 #1
Share this Question
Share on Google+
9 Replies


P: 93
Use this friend this will work for u
<html><body oncontextmenu="return false;" >
Sep 25 '08 #2

100+
P: 129
Will you please excuse me that
can you please give me full code with an example please my friend , i am poor at javascript.
Sep 25 '08 #3

P: 93
Ok friend you ahve to do nothing just write in the body tag oncontextmenu="return false;". If you will return true then it will enable the right click.

like this for example .This is full code .You ac save this with .html extension and see that right click is disabled


[HTML]<html><body oncontextmenu="return false;" >
<td><span>Action</span></td>
<td><select id="combo1" name="combo1" size="1" class="optional" >
<option value="condition 1">Proceed</option>
<option value="condition 2">Reject</option></select></td>

<td><span>No Action</span></td>
<td><select id="combo2" name="combo2" size="1" class="optional" >
<option value="condition 1">Proceed</option>
<option value="condition 2">Reject</option></select></td>
<td><input type="file" id ="attachment"/></td>
</body></html>[/HTML]
Sep 25 '08 #4

100+
P: 129
Hi friend,
sorry it is allowing the right click on the page. It displays two select boxes and a file box. But it allowing the right click on the page. I want disallow right click on total page.
Sep 27 '08 #5

acoder
Expert Mod 15k+
P: 16,027
The first question to ask yourself is why you even need this script. If it's to protect the source code or images, forget it. It's annoying and the users who do want access can easily work around your little script. For images, watermark them instead.

If you must, you can use the right click detection script described here.
Sep 27 '08 #6

P: 93
Please can you please let me know about the Internet Explorer or browser's information like
version and name because it is working fine in my environment i.e with IE 6thversion.
Sep 29 '08 #7

P: 9
In order to deal whith right click you must overide the context menu

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2.   "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <!-- 
  4.      Example File From "JavaScript and DHTML Cookbook"
  5.      Published by O'Reilly & Associates
  6.      Copyright 2003 Danny Goodman
  7. -->
  8. <html>
  9. <head>
  10. <title>Recipe 10.7</title>
  11. <style rel="stylesheet" id="mainStyle" type="text/css">
  12. html {background-color:#cccccc}
  13. body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
  14.     margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
  15. h1 {text-align:right; font-size:1.5em; font-weight:bold}
  16. h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline}
  17. .buttons {margin-top:10px}
  18.  
  19.  
  20. </style>
  21. <style type="text/css">
  22. .contextMenus {position:absolute; background-color:#cfcfcf; 
  23.               border-style:solid; border-width:1px; 
  24.               border-color:#EFEFEF #505050 #505050 #EFEFEF; 
  25.               visibility:hidden}
  26. .menuItem {cursor:pointer; font-size:9pt; 
  27.            font-family:Arial, Helvetica, sans-serif; 
  28.            padding-left:5px; color:black; 
  29.            background-color:transparent; 
  30.            text-decoration:none}
  31. .menuItemOn {cursor:pointer; font-size:9pt; 
  32.              font-family:Arial, Helvetica, sans-serif; 
  33.              padding-left:5px; color:red; 
  34.              background-color:yellow; 
  35.              text-decoration:underline}
  36. .contextEntry {font-weight:bold; color:darkred; cursor:pointer}
  37. </style>
  38.  
  39. <script type="text/javascript">
  40. // context menu data objects
  41. var cMenu = new Object();
  42. cMenu["lookup1"] = {menuID:"contextMenu1", hrefs:["http://www.m-w.com/cgi-bin/dictionary?book=Dictionary&va=sesquipedalian","http://www.m-w.com/cgi-bin/dictionary?book=Thesaurus&va=sesquipedalian"]};
  43. cMenu["lookup2"] = {menuID:"contextMenu2", hrefs:["http://www.wyomingtourism.org/","http://www.pbs.org/weta/thewest/places/states/wyoming/","http://cnn.looksmart.com/r_search?l&izch&pin=020821x36b42f8a561537f36a1&qc=&col=cnni&qm=0&st=1&nh=10&rf=1&venue=all&keyword=&qp=&search=0&key=wyoming","http://google.com","http://search.yahoo.com"]};
  44.  
  45. // position and display context menu
  46. function showContextMenu(evt) {
  47.     // hide any existing menu just in case
  48.     hideContextMenus();
  49.     evt = (evt) ? evt : ((event) ? event : null);
  50.     if (evt) {
  51.         var elem = (evt.target) ? evt.target : evt.srcElement;
  52.          if (elem.nodeType == 3) {
  53.             elem = elem.parentNode;
  54.         }
  55.         if (elem.className == "contextEntry") {
  56.             var menu = document.getElementById(cMenu[elem.id].menuID);
  57.             // turn on IE mouse capture
  58.             if (menu.setCapture) {
  59.                 menu.setCapture();
  60.             }
  61.             // position menu at mouse event location
  62.             var left, top;
  63.             if (evt.pageX) {
  64.                 left = evt.pageX;
  65.                 top = evt.pageY;
  66.             } else if (evt.offsetX || evt.offsetY) {
  67.                 left = evt.offsetX;
  68.                 top = evt.offsetY;
  69.             } else if (evt.clientX) {
  70.                 left = evt.clientX;
  71.                 top = evt.clientY;
  72.             }
  73.             menu.style.left = left + "px";
  74.             menu.style.top = top + "px";
  75.             menu.style.visibility = "visible";
  76.             if (evt.preventDefault) {
  77.                 evt.preventDefault();
  78.             }
  79.             evt.returnValue = false;
  80.         }
  81.     }
  82. }
  83.  
  84. // retrieve URL from cMenu object related to chosen item
  85. function getHref(tdElem) {
  86.     var div = tdElem.parentNode.parentNode.parentNode.parentNode;
  87.     var index = tdElem.parentNode.rowIndex;
  88.     for (var i in cMenu) {
  89.         if (cMenu[i].menuID == div.id) {
  90.             return cMenu[i].hrefs[index];    
  91.         }
  92.     }
  93.     return "";
  94. }
  95.  
  96. // navigate to chosen menu item
  97. function execMenu(evt) {
  98.     evt = (evt) ? evt : ((event) ? event : null);
  99.     if (evt) {
  100.         var elem = (evt.target) ? evt.target : evt.srcElement;
  101.         if (elem.nodeType == 3) {
  102.             elem = elem.parentNode;
  103.         }
  104.         if (elem.className == "menuItemOn") {
  105.             location.href = getHref(elem);
  106.         }
  107.         hideContextMenus();
  108.     }
  109. }
  110.  
  111. // hide all context menus
  112. function hideContextMenus() {
  113.     if (document.releaseCapture) {
  114.         // turn off IE mouse event capture
  115.         document.releaseCapture();
  116.     }
  117.     for (var i in cMenu) {
  118.         var div = document.getElementById(cMenu[i].menuID)
  119.         div.style.visibility = "hidden";
  120.     }
  121. }
  122.  
  123. // rollover highlights of context menu items
  124. function toggleHighlight(evt) {
  125.     evt = (evt) ? evt : ((event) ? event : null);
  126.     if (evt) {
  127.         var elem = (evt.target) ? evt.target : evt.srcElement;
  128.         if (elem.nodeType == 3) {
  129.             elem = elem.parentNode;
  130.         }
  131.         if (elem.className.indexOf("menuItem") != -1) {
  132.             elem.className = (evt.type == "mouseover") ? "menuItemOn" : "menuItem";
  133.         }
  134.     }
  135. }
  136.  
  137. // set tooltips for menu-capable and lesser browsers
  138. function setContextTitles() {
  139.     var cMenuReady = (document.body.addEventListener || typeof document.oncontextmenu != "undefined")
  140.     var spans = document.body.getElementsByTagName("span");
  141.     for (var i = 0; i < spans.length; i++) {
  142.         if (spans[i].className == "contextEntry") {
  143.             if (cMenuReady) {
  144.                 var menuAction = (navigator.userAgent.indexOf("Mac") != -1) ? "Click and hold " : "Right click ";
  145.                 spans[i].title = menuAction + "to view relevant links"
  146.             } else {
  147.                 spans[i].title = "Relevant links available with other browsers (IE5+/Windows, Netscape 6+)."
  148.                 spans[i].style.cursor = "default";
  149.             }
  150.         }
  151.     }
  152. }
  153.  
  154. // bind events and initialize tooltips
  155. function initContextMenus() {
  156.     if (document.body.addEventListener) {
  157.         // W3C DOM event model
  158.         document.body.addEventListener("contextmenu", showContextMenu, true);
  159.         document.body.addEventListener("click", hideContextMenus, true);
  160.     } else {
  161.         // IE event model
  162.         document.body.oncontextmenu = showContextMenu;
  163.     }
  164.     // set intelligent tooltips
  165.     setContextTitles();
  166. }
  167.  
  168.  
  169. </script>
  170. </head>
  171. <body onload="initContextMenus()">
  172. <h1>Custom Contextual Menu</h1>
  173. <hr /> 
  174.  
  175. <p>This sentence has at least one <span id="lookup1" class="contextEntry">sesquipedalian</span> word
  176. and mention of the state of <span id="lookup2" class="contextEntry">Wyoming</span>, both of which could have additional lookups.</p>
  177.  
  178. <div id="contextMenu1" class="contextMenus" onclick="hideContextMenus()" onmouseup="execMenu(event)" onmouseover="toggleHighlight(event)" onmouseout="toggleHighlight(event)">
  179. <table><tbody>
  180. <tr><td class="menuItem">Merriam-Webster Dictionary</td></tr>
  181. <tr><td class="menuItem">Merriam-Webster Thesaurus</td></tr>
  182. </tbody></table>
  183. </div>
  184.  
  185. <div id="contextMenu2" class="contextMenus" onclick="hideContextMenus()" onmouseup="execMenu(event)" onmouseover="toggleHighlight(event)" onmouseout="toggleHighlight(event)">
  186. <table><tbody>
  187. <tr><td class="menuItem">Wyoming Tourist Info</td></tr>
  188. <tr><td class="menuItem">State Map</td></tr>
  189. <tr><td class="menuItem">cnn.com</td></tr>
  190. <tr><td class="menuItem">Google</td></tr>
  191. <tr><td class="menuItem">Yahoo Search</td></tr>
  192. </tbody></table>
  193. </div>
  194.  
  195. </body>
  196. </html>
  197.  

Online Example for Custom Contextual Menu(content sensitive)
Sep 29 '08 #8

100+
P: 129
Hai,
My operating system is ubuntu and i am using mozilla firefox 1.5.0.12eol. i don't have internet explorer.
Oct 15 '08 #9

acoder
Expert Mod 15k+
P: 16,027
As I asked earlier, why do you want to disable right click?
Oct 15 '08 #10

Post your reply

Sign in to post your reply or Sign up for a free account.