Question

This seems to work fine in Firefox but, in IE8 specifically (it may work in other version of IE), I have an issue where the event variable is lost.

There is an event (mousedown) that calls a function that stores a parameter set. One of the parameters is the event itself. The function that is called stores the parameters in global variables so they can be accessed by the function called in the settimeout.

Once it is executed, the function called by the set timeout no longer has access to the properties in the event variable. It is still recognized as an event object, but all the properties are reset.

I have tried using function references, using anonymous functions both using the globals and also passing them as parameters but nothing seems to be working. Any one have any ideas?

I know this is a little complicated so I setup a simple example that shows my issue here:
http://jsfiddle.net/fd8sk/

When you click ‘Fire now’ (which doesn’t use a settimeout), you get that the button click is a number. When you click the ‘Fire delay’, the button is now ‘Unknown’.

This is a pretty generic function that has a lot of parameters that aren’t always used so I’m hoping to avoid major refactoring of this. In my real example, the parameter that is the event in my issue case won’t be an event in other scenarios.

Answer 1

onmousedown="eventFired(event);"

does something subtly different in the event model of IE<9 than it does in other browsers.

In most browsers, the above works because onX inline event handlers receive an implicit argument-like local variable called event, which is a newly-minted Event object for each new event. This gets passed to the eventFired function and remembered for later use.

In the legacy-IE event model, there aren’t separate event objects, only the window.event property, which there’s only ever one of, one which returns details of the current event being handled. When you refer to event in an inline event handler attribute, you’re getting that property as a global variable, and not a newly-spawned instance as a local argument. This gets passed to the function and remembered, but only the object is remembered and not its values. Later on, when the object is re-used, its properties reflect the new event being handled (if any), not the old.

So remember only the particular property value you’re interested in keeping instead of the event object. I’d also avoid using inline event handler attributes as there are so many gotchas with them.

<input type="button" id="fire-now" value="Fire now" />
<input type="button" id="fire-delay" value="Fire delay" />
<script type="text/javascript">
    document.getElementById('fire-now').onclick= function(e) {
        e= e || window.event;
        alert(event.button);
    };
    document.getElementById('fire-delay').onclick= function(e) {
        e= e || window.event;
        var button= e.button;
        setTimeout(function() {
            alert(button);
        }, 1000);
    };
</script>

Note that this isn’t the end of your cross-browser worries as IE<9’s button property has different values to the standard MouseEvent buttons!