javascript - 为什么使用 MooTools 定义伪事件时，Firefox 中的事件未定义？

Question

我正在尝试使用 MooTools 定义一个伪事件。它可以在 Chromium 中运行，但不能在 Firefox 中运行。这两个浏览器都是最新的稳定版本。这是我的事件:

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

如果在单击某个元素时按下 crtl 键，它应该会触发。这就是我添加事件的方式:

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);
    }
});

有什么提示或想法会导致此错误发生吗？我的想法是，我不传递 event，但我不知道如何执行此操作，因为我的代码在 Chromium 和其他浏览器中运行。

Answer 1

如果您检查 DOMEvent.definePseudo 函数中的参数，您将看到没有 event 对象，而是 args 数组，其中事件object 是该数组的第一个元素。所以代替:

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

应该是:

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

事件对象通常作为第一个参数传递给事件处理程序，definePseudo 实际上是事件处理程序处理程序，您应该在其中决定事件处理程序将发生什么。您的代码在 Chrome 上运行的原因(IE、Safari 和 Opera 也支持)是因为它们始终提供全局事件变量，但在 Firefox 中您需要将事件对象作为参数传递给事件处理程序。

添加其他自定义事件(例如 control+click)也可以使用 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');
});