Event object & Writing cross-browser JavaScript

Approach -2

Here is another approach which involves building a small compatibility layer. It uses the __defineGetter__ and __defineSetter__ properties of the prototype of an object which are available only in Mozilla Firefox.

 

It allows you to add wrappers for all the Microsoft specific features to the HTML elements of the page and thus eliminate all the conditional scripting in your JavaScript code.

 

Click here to follow the link.

 

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

Approach -1

 

Writing cross-browser JavaScript can be a tedious task, especially if you are new to it. The problems arise because JavaScript interpreters included in the browsers implement some of the language features differently.

Following are some of the common discrepancies between IE and Mozilla Firefox –

 

The event object: Whenever you move the mouse, click, press a key, etc., an event is fired. In IE this event is global; it's stored in window.event.

In Firefox, and other browsers, this event is passed to whatever function is attached to the action.

Take a look at the following code fragment -

 

document.onmousemove = mouseMove;

function mouseMove(ev){

          ev = ev || window.event;

          var target = ev.target || ev.srcElement;

}

 

Since we attached the mouseMove function to document.onmousemove, mouseMove gets passed the event object. To make ev contain the event object in every browser we OR it with window.event.

 

Also, IE stores the target element of the event in window.event.srcElement whereas Firefox stores it in ev.target. So to get the target of the event, we use ev.target || ev.srcElement.

 

Mouse Coordinates: Firefox and other browsers use event.pageX and event.pageY to represent the mouse position relative to the document. If you have a 500x500 window and your mouse is in the middle, pageX and pageY will both be 250. If you then scroll down 500 pixels pageY will now by 750. Contrary to this, MSIE uses event.clientX and event.clientY to represent the mouse position relative to the window, not the document. In our same example clientX and clientY will both be 250 if you put your mouse at the middle of a 500x500 window. If you scroll down on the page, clientY will remain 250! since it is measured relative to the window and not where you are on the document.

 

As a result we need to add the scrollLeft and scrollTop properties of the document body to our mouse position.

 

if(ev.pageX || ev.pageY){

     return {x:ev.pageX, y:ev.pageY};

}

var mouseCoords = { x:ev.clientX + document.body.scrollLeft, y:ev.clientY + document.body.scrollTop };

 

InnerText of an item: Firefox  uses element.textContent whereas IE uses element.innerText.

 

var text = element.innerText || element.textContent

 

Adding opetions to Select element:

To add to the options[] array of an html Select the standard method is selectObject.add(option,before); where option is the option to add and before indicates where to insert the new option (null indicates that the new option will be inserted at the end of the list)

But IE uses selectObject.add(option) implementation. So to get around it use the following code –

try

{ selectObject.add(y,null); // standards compliant }

catch(ex)

{ selectObject.add(y); // IE only }

 

Conclusion: The disadvantage of the approache mentioned above is that these conditional code fragments are spread all over your application’s JavaScript code. For a better code organization consider wrapping the fragments that deal with cross-browser discrepancies in a set of functions and use them in your code.

 

 

Thanks & Regards,

Arun Manglick

SMTS || Microsoft Technology Practice || Bridgestone - Tyre Link || Persistent Systems || 3023-6258

 

DISCLAIMER ========== This e-mail may contain privileged and confidential information which is the property of Persistent Systems Pvt. Ltd. It is intended only for the use of the individual or entity to which it is addressed. If you are not the intended recipient, you are not authorized to read, retain, copy, print, distribute or use this message. If you have received this communication in error, please notify the sender and delete all copies of this message. Persistent Systems Pvt. Ltd. does not accept any liability for virus infected mails.