Firefox 缺少 window.event 的解决方法？ [复制]

Question

Firefox 缺少 window.event 让我措手不及……即

<script>
function clicked()
{ 
 console.log(event);
}
</script>

<div onclick = "clicked()">Whatever</div>

几乎可以在所有现代浏览器中使用，但“事件”在 Firefox 中是未定义的，我们必须在其中显式编写

<script>
function clicked(event)
{ 
 console.log(event);
}
</script>

<div onclick = "clicked(event)">Whatever</div>

是否有任何可行的解决方法来访问 Firefox 中的事件对象而不必将其显式作为函数参数？

Answer 1

这是一个丑陋的 hack，假设所有事件侦听器最终都将由 EventTarget.addEventListener() 方法注册。下面的“解决方案”更改了EventTarget 的原型（糟糕！），以便将所有事件侦听器包装在一个方法中，该方法将在委派给实际侦听器之前将事件分配给window.event。

const addEventListener = EventTarget.prototype.addEventListener;

EventTarget.prototype.addEventListener = function(name, handler) {
  addEventListener.call(this, name, function(event) {
    window.event = event;
    
    handler(event);
  })
};

function clicked() {
  // just demonstrating that window.event is set
  console.log(window.event.target.innerHTML);
}

document.getElementById('one').addEventListener('click', clicked);
document.getElementById('two').addEventListener('click', clicked);

<button id="one">Test 1</button>
<button id="two">Test 2</button>

以上只是说明了一种可能的方法，并且在很大程度上未经测试。您的里程可能会有所不同。

---

更新

正如 cmets 中所指出的，这不适用于通过on... HTML 属性绑定或使用Element.on... 属性分配的事件处理程序。

另一种（可以说是更安全）的方法是在文档元素上使用事件捕获，并在那里执行对window.event 的分配。

document.documentElement.addEventListener('click', function(event) {
  window.event = event;
}, true);

function clicked() {
  // just demonstrating that window.event is set
  console.log(window.event.target.innerHTML);
}

document.getElementById('one').addEventListener('click', clicked);
document.getElementById('two').onclick = clicked;

<button id="one">Test 1</button>
<button id="two">Test 2</button>
<button id="three" onclick="clicked()">Test 3</button>