javascript - 如何覆盖 event.pageX 等事件属性 setter ？

Question

我想覆盖所有事件的 event.pageX 和 event.pageY，因为 IE10+ 存在一个错误，有时会返回 pageX/Y 的浮点位置而不是整数。

Answer 1

据我所知，您无法覆盖此 native 属性。您可以构建自己的 getter:

MouseEvent.prototype.getPageX = function() {
    return Math.ceil(this.pageX);
}

然后使用event.getPageX()而不是event.PageX

编辑: 有一个小实验可以证明这是不可能的。我制作了这个小事件监听器，因此当我单击任意位置时，我可以看到检查事件实例:

var bod = document.querySelector("body");

bod.addEventListener("click", function(e) {
    console.log(e);
});

然后我尝试更改 MouseEvent 构造函数。

var M = MouseEvent;
MouseEvent = function() {
    M.apply(this, arguments); // in fact this is not possible
    this.pageX = Math.ceil(this.pageX+15000);
}

现在，当您单击屏幕时，什么浏览器会做什么？它创建了一个 MouseEvent 的新实例。但在 javascript 中却做不到。它可以用任何它想要的语言来完成。因此，像 new MouseEvent 这样的事情在 js 中不会发生，并且没有地方可以覆盖该新对象的属性。

作为证明，您可以尝试使用以下方法自行创建新事件:

var evt = new MouseEvent("click", {
    canBubble: true,
    cancelable: true,
    view: window,
  });

它实际上会失败:

M.apply(this, arguments);
// TypeError: Failed to construct 'MouseEvent': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

但我的观点是，简单地点击屏幕并没有失败，因为它没有在 js 中使用 new MouseEvent ，因此它不能被覆盖。