有没有办法覆盖事件对象并执行我喜欢的操作？

Question

我知道有一种方法可以更改可从全局范围访问的对象的功能。例如，window.alert 可以通过以下代码覆盖以通过 window.confirm 使用：

var oldAlert = window.alert;
window.alert = function(string) {
    var promise = oldAlert(string);
    window.confirm(string)
    return promise;
}

所以我想知道事件对象（即 event.preventDefault() ）是否可以重写为不同的东西。例如，如果我有多个地方必须同时执行 event.preventDefault() 和 event.stopPropagation(); 并且我可以重写 event.preventDefault() 来同时执行这两个操作，这将很有帮助。然而，事件对象只能通过本地范围访问，并且要按照我在上一个示例中所做的方式重写事件对象，我需要通过全局范围访问它们。那么，有没有办法在全局范围内覆盖事件对象并使它们做一些不同的事情呢？谢谢。

Answer 1

可以通过覆盖 Event.prototype.preventDefault，但这不是一个好主意：

const nativePreventDefault = Event.prototype.preventDefault;
Event.prototype.preventDefault = function() {
  nativePreventDefault.call(this);
  this.stopPropagation();
};

document.querySelector('#parent').addEventListener('click', () => {
  console.log('parent sees event');
});
document.querySelector('#child').addEventListener('click', (e) => {
  console.log('child calling custom preventDefault');
  e.preventDefault();
});

<div id="parent">
  <div id="child">child</div>
</div>

作为更直观、更安全的替代方案，考虑将事件作为参数传递给调用这两种方法的函数：

const stop = (event) => {
  event.stopPropagation();
  event.preventDefault();
};

然后就这样做：

stop(event);

有没有办法覆盖事件对象并执行我喜欢的操作？

Is there a way to overwrite event objects and do what I prefer instead?

javascript

scope

function

overwrite

dom-events