Handling events with the DOM - Part III

In order to detect mouse buttons, we use two main properties: "which" and "button". We’ve already seen this Netscape property in key detection processes. However, these properties do not always work correctly when being used in a "click" event.

The "which" property assigns the following values for mouse buttons:

• Left button: 1
  
• Middle button (mouse wheel): 2
  
• Right button: 3

The assignation sequence is logical, but currently, browser support is very limited. We need to look at the "button" property, which in the W3C event model uses the following values:

• Left button: 0
  
• Middle button: 1
  
• Right button: 2

In Netscape 6+, the values are different:

• Left button: 1
  
• Middle button: 2
  
• Right button: 3

And Mozilla assigns button values as follows:

• Left button: 1
  
• Middle button: 1
  
• Right button: 2

Once again, incompatibilities crop up, because IE interprets mouse buttons differently:

• Left button: 1
  
• Middle button: 4
  
• Right button: 2

Also, IE supports button combinations; for example, a value of 3, meaning that left and right buttons are combined, or 6, when the middle and right buttons are clicked at the same time. However, this is only available in the specifications. In practice, it’s not actually supported.

Whew, here we have a wide gamut of button implementations, where none of them stick to a common sense assignment. Anyway, we can try to build a function for mouse button detection:

function detectMouseButton(e){

    var mousebutton;

    if (!e) var e=window.event;

    if(e.button){mousebutton=e.button;}

    else if(e.which){mousebutton=e.which;}

    alert('Mouse button: '+mousebutton);

}

Certainly, this function is not very suitable for practical use, but as an example it is good enough. From the above specifications, it can be deduced that we’re able to detect right clicking events too. This is a little more useful than the previous case, for instance if we need to build a customized context menu. The basic function to detect a right click would be something similar to this:

function detectRightClick(e){

    var rightclick='';

    if(!e) var e=window.event;

    if(e.which){

          (e.which==3)?rightclick='Right clicking!':rightclick='Not right clicking!';

    }

    else if(e.button){

          (e.button==2)?rightclick='Right clicking!':rightclick='Not right clicking!';

    }

    alert(rightclick);

}

And we call the function like this:

document.onmousedown=detectRightClick;

The above example will detect a right click event for most browsers, displaying the alert box with the corresponding messages according to the mouse buttons clicked. By the way, that’s not very creative, but it works pretty well. Another possibility for detecting right clicks is to implement the "oncontextmenu" event handler, but it functions only in IE and Mozilla. The JavaScript code is listed below:

function detectRightClick(e){

    alert( 'Your are right clicking now!');

}

document.oncontextmenu=detectRightClick;

It’s really simple, but not suitable for cross browser implementation. Anyway, if you’re working within an intranet environment, where the browser platform is IE, this might be a valid alternative to consider.

Finally, we’ve developed valid solutions for solving common problems associated with event handling, and I feel that the whole experience was quite successful. The vast and intriguing arena of the Event Handling Model is not as difficult as it seems. Are you still with me? Fine, because we’re almost done. Just don’t miss the final part.

Conclusion

Over this series, we’ve covered the most relevant aspects of Event handling with the DOM. From the basics and core concepts regarding event handlers, to proper implementation for common event registration methods in Web documents, it’s been a long way to go. Despite the tremendous effort we've devoted to this so far, event handling is still a huge area to be mastered. However, it’s necessary to embrace the subject without feeling overcome by its complexity, building and reusing code that works for practical Web development applications. Having all of that knowledge at our disposal is more that enough to successfully face any event handling tasks.