Post
Ask Question

Play with JavaScript: Capturing Mouse Events

Sometime there is a need to disable MouseEvents for specific task(s) in Web-Pages.
 
The following code-snippet shows how to achieve the same:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2. <html>  
  3.     <head>  
  4.         <title>Capturing Mouse Events Using JavaScript</title>  
  5.     </head>  
  6.     <body>  
  7.         <div>  
  8.             <b> Testing with Link Button : </b>  
  9.             <a href="javascript:void(null)"  
  10. onmousedown="return captureButton(event)" onmouseup="return preventOperation(event)"  
  11. onclick="return preventOperation(event)" ondblclick="return preventOperation(event)"  
  12. oncontextmenu="return preventOperation(event)"  
  13. >Click here with various mouse buttons to test</a>  
  14.         </div>  
  15.         <br/>  
  16.         <div>  
  17.             <b> Testing wuth Submit Button : </b>  
  18.             <input name=btnG type=submit onmousedown="return captureButton(event)" onmouseup="return preventOperation(event)"  
  19. onclick="return preventOperation(event)" ondblclick="return preventOperation(event)"  
  20. oncontextmenu="return preventOperation(event)">  
  21.             </div>  
  22.             <br/>  
  23.             <div>  
  24.                 <b> Testing with Input Text : </b>  
  25.                 <input name=btnG type=text onmousedown="return captureButton(event)" onmouseup="return preventOperation(event)"  
  26. onclick="return preventOperation(event)" ondblclick="return preventOperation(event)"  
  27. oncontextmenu="return preventOperation(event)">  
  28.                 </div>  
  29.                 <script language="Javascript">  
  30.                     function captureButton(event)  
  31.                     {  
  32.                         var button;  
  33.                         if (event.which == null)  
  34.                             button= (event.button < 2) ? "MOUSE BUTTON : LEFT" : ((event.button == 4) ? "MOUSE BUTTON : MIDDLE" : "MOUSE BUTTON : RIGHT");  
  35.                         else  
  36.                             button= (event.which < 2) ? "MOUSE BUTTON : LEFT" :((event.which == 2) ? "MOUSE BUTTON : MIDDLE" : "MOUSE BUTTON : RIGHT");  
  37.                         alert(button);  
  38.                         preventOperation(event);  
  39.                     }  
  40.                     function preventOperation(event)  
  41.                     {  
  42.                         if (event.preventDefault)  
  43.                             event.preventDefault();  
  44.                         else  
  45.                             event.returnValue= false;  
  46.                             return false;  
  47.                     }     
  48.                 </script>  
  49.     </body>  
  50. </html>  
Get above code in a text document and named it as MouseEvents.html or whatever you would like. Then just run the html file using browser and play with JavaScript.