Microsoft ASP.NET Ajax DOM Events

Lately I add to deal with a lot of cross browser stuff (Needless to say is is very ugly and in frustration times I wish we only had IE

Anyway , one cool way to solve lots of these issues is of course to use a Framework that does all the Cross browser JS for you.I am using Microsoft ASP.NET Ajax Library. Here is a nice example of how to handle mouse clicks in a way that will work on IE, Chrome and Firefox.

When trying to work with the mouse event (And writing cross browser code) you get familiar with the phrase :”JavaScript Madness”. For example: When wanting to know which mouse button was clicked and we want to use the “event” object JavaScript offers we see there is little cross browser compatibility regarding the number representing which button was clicked. In IE we have “event.button” with the values of 1, 4, 2 but we don’t have “event.which” which works for Safari Netscape and some other browsers. The “event.which” value was originally used in Netscape, and the “event.button” value was originally used in Internet Explorer. Later browsers used both, and messed them both up.

So here is a Sample code to illustrate how simple it is when using the framework and the DOM options it provides:

<script>

function pageLoad(sender, args) {

    //Attach the onmousedown to a div

    Sys.UI.DomEvent.addHandler($get("divMoustDown"), "mousedown", ShowContextMenu);

}

function ShowContextMenu(e) {

  if (e.button == Sys.UI.MouseButton.rightButton)

  {

    alert("Right button was clicked");

   }

   else if (e.button == Sys.UI.MouseButton.leftButton)

   {

    alert("Left button was clicked");

   }

   else {

       alert("Middle button was clicked");

   }

}  

</script>

You can read more on the JavaScript mouse problems here: Mouse Events

And the Sys.UI namespace here : ASP.NET Ajax Client reference.

source: blogs.microsoft