Detecting Which Mouse Button Was Clicked

The computer mouse is an important device, not only for controlling a computer, but also for navigating Web pages. Web pages only interact with one mouse button (the left one, if there is more than one). The right button is used to trigger a contextual menu.

However, using DHTML, you can detect which mouse button is being clicked using the button event property (Figure 15.7) to get the button's value (Table 15.1) and tailor scripts accordingly.

Figure 15.7. The general syntax for detecting the mouse button pressed.

Table 15.1. Mouse Button Values

















[**] Includes all Mozilla browsers and Opera

In this example (Figure 15.8), clicking anywhere in the image will display an alert showing which mouse button was pressed.

Figure 15.8. The mouse button that the user clicked is displayed in the alert.

To find which mouse button was clicked:


var isIE = 0;

We need to do a quick browser check for Safari (which is designated KHTML) and Internet Explorer (Code 15.4)

Code 15.4. The button event property is used to determine which mouse button was clicked to trigger the event.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " xhtml1-strict.dtd"> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &Ajax | Detecting Which Mouse Button was Clicked</title> <script type="text/javascript"> var isIE = 0; if ((navigator.appVersion.indexOf('KHTML') != -1)|| (navigator.appName.indexOf('Microsoft  Internet Explorer') != -1)) {isIE = 1;} if(isIE) var buttonRosetta = new Array('None','Left','Right','','Middle'); else var buttonRosetta = new Array('Left','Middle','Right'); function initPage(objectID) {      var object = document.getElementById(objectID);      object.onmousedown = findMouseButton;      document.onclick = findMouseButton; } function findMouseButton(evt) {      evt = (evt) ? evt : ((window.event) ? window.event : null)      if (typeof evt.button != 'undefined') {         alert('Mouse Button Value = ' + buttonRosetta[evt.button]) }} </script> <style type="text/css" media="screen"> #object1 {      position: relative;      top: 50px;      left: 100px;      width: 392px;      cursor: pointer;      border: solid 2px #f00; } </style> </head> <body onload="initPage('object1');"> <h1>Click me and I will tell you which mouse button you pressed.</h1> <br /> <div ><img src="/books/3/292/1/html/2/alice06a.gif" height="480" width="392" alt="alice"/></div> </body></html>


if(isIE) var buttonRosetta = new x Array('None','Left','Right','', 'Middle');

Next, initialize an array to hold the button names. Using your browser detection from Step 1, assign the values to the array according to the browser, with each name in the array ordered according to its mouse button value (Table 15.1).


function initPage() {...}

Add the function initPage() to your JavaScript and bind a mousedown event to an object.

In this example, I'm binding an element with a particular ID (object1) to an onmousedown handler, and the whole document to an onclick handler, to detect whenever a mouse button is pressed anywhere in the Web page. You can use one or the other depending on need.


function findMouseButton(evt) {...}

Add the function findMouseButton() to your JavaScript.

This code first uses the event equalizer discussed in Chapter 12("Passing Events to a Function") to allow Internet Explorer and W3Ccompliant browsers to play together, and then evaluates the button event property to determine its value. Unfortunately, W3Ccompliant browsers and Internet Explorer will report different values.

For this example, I simply added an alert to report the value of the mouse button pressed.



Add an onload event handler in the <body> tag to trigger the initPage() function created in Step 1. This sets up the events for the page.


  • Keep in mind that older Mac mice only have one button (treated as the left button), and Controlclicking with a Mac mouse is treated as a rightclick. Also, some PCcompatible mice don't have a middle button, so clicking the scroll wheel acts as the middle button.

  • Rightor Controlclicking normally brings up a contextual menu. If you use onmouseup or onclick as the event handler to detect a rightclick event, it will be ignored, since the contextual menu trumps all other events.

CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: