Shaun Mccran

My digital playground


Handling JavaScript event model differences in Internet Explorer and Firefox

A few weeks ago I created an inline editing system for a Content Management System. It allowed a user to click on a page element and edit it inline. The updated data was then submitted through an AJAX request.

I have recently discovered an issue with some of the JavaScript code that I wrote in the event handling routine.

The original article is here:

The event handling section of the script is repeated below. The problem stems from Internet Explorer and Firefox handling click events differently.

view plain print about
1function getId(e) {
2    var targ;
3    if (!e) var e = window.event;
4    if ( targ =;
6    else if (e.srcElement) targ = e.srcElement;
8    if (targ.nodeType == 3) // defeat Safari bug
9        targ = targ.parentNode;
11    //thisTarget =; // FF
12    //thisTarget =; //IE
14    thisTarget = clickHandler(e)
15    //alert(thisTarget);

Examining the code above I can see that to track event handling in Internet Explorer I need to use:

view plain print about

This is because IE uses the window.event model, whereas all other browsers intrinsically handle the event model. This means that you can just say:

view plain print about

As Firefox will automatically resolve the 'target' value.

The Fix

To create a cross browser script that will work in both Internet Explorer and Firefox we can use the returned value from a function like this:

view plain print about
1function clickHandler(e) {
2return (window.event) ? :;

This function will evaluate the response of two arguments from a switch statement. Each browser will only understand one of each of these statements, so the browser will only return the value of the statement it understands (Both statements return the same calculated value).

And that is a cross browser Event handling script.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
salmanonline's Gravatar Excellent Forum Post. You have explained the whole process quite clearly that even a kid can easily understand what you wanna share with the readers of this forum out here.
# Posted By salmanonline | 15/12/2015 15:26
<a href='s Gravatar Hey the post was awesome, The way yo have written is very unique. I really appreciate your work
# Posted By <a href= | 15/12/2015 22:11
free blogger templates's Gravatar The post you have shared is really helpful for those who are searching for differeny web browsers....
# Posted By free blogger templates | 15/12/2015 22:14
free blogger themes's Gravatar your content seems quite easy and helpful to understand.
# Posted By free blogger themes | 16/12/2015 05:36
Back to top