Question

我有一个匀重和polyfilled版本的angularjs 1.3在ie8上完美运行。不幸的是，当页面上包含mootools时，存在相当多的冲突。我已经设法获得除了一个以外的所有处理，其中添加/删除EventListener和dispatchEvent到Window.prototype，HTMLDocument.prototype和Element.prototype。它检查是否加载了mootools，如果加载，它会以不同方式添加它们。

!window.addEventListener && (function (WindowPrototype, DocumentPrototype, ElementPrototype, addEventListener, removeEventListener, dispatchEvent, registry) {
        var addEventListenerFn = function(type, listener) {
            var target = this;
            registry.unshift([target, type, listener,
                function (event) {
                    event.currentTarget = target;
                    event.preventDefault = function () {
                        event.returnValue = false;
                    };
                    event.stopPropagation = function () {
                        event.cancelBubble = true;
                    };
                    event.target = event.srcElement || target;
                    listener.call(target, event);
                }]);

            // http://msdn.microsoft.com/en-us/library/ie/hh180173%28v=vs.85%29.aspx
            if (type === 'load' && this.tagName && this.tagName === 'SCRIPT') {
                var reg = registry[0][3];
                this.onreadystatechange = function (event) {
                    if (this.readyState === "loaded" || this.readyState === "complete") {
                        reg.call(this, {
                            type: "load"
                        });
                    }
                }
            } else {
                this.attachEvent('on' + type, registry[0][3]);
            }
        };

        var removeEventListenerFn = function(type, listener) {
            for (var index = 0, register; register = registry[index]; ++index) {
                if (register[0] == this && register[1] == type && register[2] == listener) {
                    if (type === 'load' && this.tagName && this.tagName === 'SCRIPT') {
                        this.onreadystatechange = null;
                    }

                    return this.detachEvent('on' + type, registry.splice(index, 1)[0][3]);
                }
            }
        };

        var dispatchEventFn = function(eventObject) {
            return this.fireEvent('on' + eventObject.type, eventObject);
        };

        if(Element.prototype.$constructor && typeof Element.prototype.$constructor === 'function') {
            Element.implement(addEventListener, addEventListenerFn);
            Element.implement(removeEventListener, removeEventListenerFn);
            Element.implement(dispatchEvent, dispatchEventFn);
            Window.implement(addEventListener, addEventListenerFn);
            Window.implement(removeEventListener, removeEventListenerFn);
            Window.implement(dispatchEvent, dispatchEventFn);
        } else {
            WindowPrototype[addEventListener] = ElementPrototype[addEventListener] = addEventListenerFn;
            WindowPrototype[removeEventListener] = ElementPrototype[removeEventListener] = removeEventListenerFn;
            WindowPrototype[dispatchEvent] = ElementPrototype[dispatchEvent] = dispatchEventFn;
        }
        DocumentPrototype[addEventListener] = addEventListenerFn;
        DocumentPrototype[removeEventListener] = removeEventListenerFn;
        DocumentPrototype[dispatchEvent] = dispatchEventFn;
    })(Window.prototype, HTMLDocument.prototype, Element.prototype, 'addEventListener', 'removeEventListener', 'dispatchEvent', []);

这解决了我的所有错误吧。当在Angular中调用此函数时，当mootools在页面上，而元素是一个表单时，addEventListener是未定义的。

addEventListenerFn = function(element, type, fn) {
      element.addEventListener(type, fn, false);
    }

具体来说，这个函数是从angulars formDirective中调用的，如此

addEventListenerFn(formElement[0], 'submit', handleFormSubmission);

为什么表单元素仍然没有addEventListener函数可用的任何想法？

Answer 1

在IE8中通过Element.prototype扩展原生类型被认为是非常不可靠的，因为原型只是部分暴露，某些东西不是从它继承/行为异常。

http://perfectionkills.com/whats-wrong-with-extending-the-dom/

MooTools在这种情况下所做的不是围绕所有不遵守正确原型链的边缘的怪癖（并且因为之前的IE6 / 7）而是复制对象上的元素原型。通过$选择器传递DOM节点。

这不太理想，因为。

var foo = document.id('foo'); 
// all known methods from Element.prototype are copied on foo, which now hasOwnProperty for them
Element.prototype.bar = function(){};
foo.bar(); // no own property bar, going up the chain may fail dependent on nodeType

无论如何，除此之外 - 您可以通过将方法从Element.prototype复制到特殊HTMLFormElement.prototype来修复您的特定问题 - 您可能会发现任何其他元素构造函数不同。

它不可扩展，你可能会在HTMLInputElement等时出现错误，在哪里划线？

mootools 1.4.2和angular 1.3在ie8中很好地配合

1 个答案: