javascript - 覆盖事件属性

Question

如何覆盖事件属性？我这样做的原因是因为我想在鼠标事件上覆盖 pageX 之类的属性，并且该属性是只读的。

我第一次尝试这个

context.addEventListener(type, function (e) {
    var Event;

    Event = function () {

        this.pageX = pageX;
        this.pageY = pageY;

        this.preventDefault = function () {
            e.preventDefault();
        };

        this.stopPropagation = function () {
            e.stopPropagation();
        };

        this.stopImmediatePropagation = function () {
            e.stopImmediatePropagation();
        };
    };

    Event.prototype = e;

    callback.call(context, new Event());
}, false);

不幸的是，这好得令人难以置信。它不适用于某些浏览器(至少是 Chrome)。无法设置属性 pageX，因为只读状态是从事件对象以某种方式继承的。

然后我试了一下

context.addEventListener(type, function (e) {
    var evt = {},
        i;

    for (i in e) {
        if (e.hasOwnProperty(i)) {
            evt[i] = e[i];
        }
    }

    evt.pageX = pageX;
    evt.pageY = pageY;

    evt.preventDefault = function () {
        e.preventDefault();
    };

    evt.stopPropagation = function () {
        e.stopPropagation();
    };

    evt.stopImmediatePropagation = function () {
        e.stopImmediatePropagation();
    };

    callback.call(context, evt);
}, false);

这个方法可行，但比第一种方法慢大约 100 倍。我真的不想走这条路，否则我每次用它都会感觉很糟糕。

我考虑过放弃。我可以将 pointX 之类的属性添加到原始事件，并在那里添加 pageX 的值。话又说回来，如果某些浏览器决定添加属性 pointX 并将其设为只读，我的所有代码都将被破坏。

我们非常欢迎任何建议。

更新:感谢 Esailija，现在可以使用了!我在下面添加解决方案。

document.body.addEventListener('mousedown', function (e) {
    var Event = function () {};

    Event.prototype = e;

    Event = new Event();

    Object.defineProperty(Event, 'pageX', {
        value: 999
    });

    console.log(Event);

}, false);

Answer 1

Property pageX cannot be set because read-only state is somehow inherited from event object.

您可以使用 Object.defineProperty 否决该分配行为.

而不是习惯，只使用一次的构造函数你应该去Object.create .它甚至还有第二个参数，类似于 defineProperties。 , 因此您可以将代码缩短为

context.addEventListener(type, function (e) {
    callback.call(context, Object.create(e, {
        pageX: {value: pageX /* configurable, enumerable, writable? */},
        pageY: {value: pageY /* configurable, enumerable, writable? */}
    }));
    // I'd guess you don't even need the explicit "super" calls
    // for preventDefault, stopPropagation and stopImmediatePropagation
}, false);