Why is event in Firefox undefined when defining a pseudo event with MooTools?

Question

I am trying to define a pseudo event with MooTools. It works in Chromium, but not in Firefox. Both browser are the newest stable version. Here is my event:

DOMEvent.definePseudo('ctrl', function(split, fn, args){
    if(event.ctrlKey == true) fn.apply(this, args); // this is where Firefox says undefined
});

It should fire, if the crtl key is pressed while clicking an element. This is how I add the event:

this.element.addEvent('click:ctrl', function(event) {
    event.stop();
    data = this.retrieve('imageData');
    this.toggleClass('selected');

    if(this.hasClass('selected')) {
        gallery.collection[data.id] = data;
    } else {
        Object.erase(gallery.collection, data.id);
    }
});

Any tips or ideas why this error occurs? My idea is, that I do not pass event, but I don't have an idea how to do this, since my code is working in Chromium and other browsers.

Answer 1

If you inspect arguments in DOMEvent.definePseudo function you will see that there are no event object, but args array, where the event object is the first element of that array. So instead of:

if ( event.ctrlKey == true ) fn.apply(this, args);

should be:

if ( args[0].control == true ) fn.apply(this, args);

Event object is usually passed as first argument to the event handler, and definePseudo is actually event handlers handler, where you should decide what will happen with the event handler. The reason why your code works on Chrome (is also supported in IE, Safari and Opera) is because they are always providing a global event variable, but in Firefox you need to pass in the event object as a parameter to the event handler.

Adding additional custom events like control+click can be also easily achieved with Element.Events:

Element.Events.controlclick = {
    base: 'click',  // the base event type
    condition: function(event){     //a function to perform additional checks
        return (event.control == true);   // this means the event is free to fire
    }
};

$('test').addEvent('controlclick', function(event){
    console.log( 'the user clicked the left mouse button while holding the control key');
});