addEvent 给出空事件对象

addEvent giving null event object

本文关键字:事件 对象 addEvent      更新时间:2023-09-26

我正在尝试在我的一个项目中获得IE8支持,但很难将addEventListener转换为addEvent(来自:http://ejohn.org/projects/flexible-javascript-events/)

所以,用他的代码,我有一个事件设置,如(来源在这里):

_addEvent(eventableIframes[i], 'mousemove', function (e) {
  utilBarHandler(e);
});

但是,当它到达utilBarHandler时,"e"是null,IE8在第783行给了我一个"需要对象"错误。我假设所需的对象是事件对象,因为当我在函数顶部注销e时,它实际上只是空。

此外,该循环中需要事件对象(如 shortcutHandlershortcutUpHandler)的每个事件都会发生这种情况。

更新:以防万一人们错过了它,这篇文章有一堆链接,突出显示特定行。

并非所有版本的IE都将事件作为参数传递。 它在window.event. 可以将此项添加到_addEvent填充程序或事件处理程序:

 e = e || window.event

如:

_addEvent(eventableIframes[i], 'mousemove', function (e) {
      e = e || window.event;
      utilBarHandler(e);
});

这将在IE或其他版本中工作。

下面是两种跨浏览器事件处理,可确保在 IE 中正确设置eventthis指针:

// add event cross browser
function addEvent(elem, event, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(event, fn, false);
    } else {
        elem.attachEvent("on" + event, function() {
            // set the this pointer same as addEventListener when fn is called
            return(fn.call(elem, window.event));   
        });
    }
}

// refined add event cross browser
function addEvent(elem, event, fn) {
    // avoid memory overhead of new anonymous functions for every event handler that's installed
    // by using local functions
    function listenHandler(e) {
        var ret = fn.apply(this, arguments);
        if (ret === false) {
            e.stopPropagation();
            e.preventDefault();
        }
        return(ret);
    }
    function attachHandler() {
        // set the this pointer same as addEventListener when fn is called
        // and make sure the event is passed to the fn also so that works the same too
        var ret = fn.call(elem, window.event);   
        if (ret === false) {
            window.event.returnValue = false;
            window.event.cancelBubble = true;
        }
        return(ret);
    }
    if (elem.addEventListener) {
        elem.addEventListener(event, listenHandler, false);
    } else {
        elem.attachEvent("on" + event, attachHandler);
    }
}

@jfriend00建议的快速而肮脏的修复,e = e || window.event ,是 99% 的方式,但我仍然遇到问题。经过更多的摆弄,我找到了答案。我不想要window.event,因为它是一个iframe。相反,我想要iframeElement.contentWindow.像这样将其添加到我的回调中就可以解决问题:

_addEvent(eventableIframes[i], 'mousemove', function (e) {
  // self.iframeElement == <iframe>
  e = e || self.iframeElement.contentWindow;
  utilBarHandler(e);
});