Question

I come again with my inabilities to comprehend javascript.

I have a draggable library and it has a command that is called like so (the _ag is just namespacing stuff):

_ag.drag(event,targetDiv);  
// targetDiv can be a string, btw - converted to an element in the function

so I’ve got code that looks like so (passing some data with a closure – a new trick to me):

header.onmousedown=function(targetDiv){
    return function(){
        _ag.drag(event,targetDiv)
    }

}(aTargetDiv)

works great! just great! in…IE! SF! Chrome! NOT IN FIREFOX!

No, firefox cannot find the event. Now normally this is easy enough with something like this (formed slightly differently – hope it’s still valid):

header.onmousedown=function(event){
    alert(event.screenX)
}

However if I decide to pass some parameters in, it blows away event, which I guess is some sort of invisible parameter in FF?

//broken thing 1:
header.onmousedown=function(event){
    alert(event.screenX)    //  somethingToPass in covers event in FF
}(somethingToPassIn)


// broken thing 2:
header.onmousedown=function(event){
    alert(event.screenX)    
}(event,somethingToPassIn)  // event is undefined

SO FIREFOX: How do I send you events? Here’s hoping this is a very stupid question, and that hoards of SO folks have the answers! Thanks in advance, I’ll be right here banging my head against the wall.

Answer 1

Firefox probably doesn’t have support for event, but instead passes it into your function when the event fires. So,

header.onmousedown=function(targetDiv){
    return function(e){
        e = e || event;  //This will give support for global event and passing the event into the function
        _ag.drag(e, targetDiv);
    }
}(aTargetDiv)

You don’t need the closure unless the aTargetDiv variable changes sometime later in the code. Instead, you could do:

header.onmousedown=function(e){
    e = e || event;
    _ag.drag(e, aTargetDiv);
};