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

这是一个丑陋的黑客，基于所有事件监听器最终将通过EventTarget.addEventListener()方法注册的假设。＆＃34;解决方案＆＃34;下面更改EventTarget的原型（哎呀！），以便将所有事件侦听器包装在一个方法中，该方法在委托给实际的侦听器之前将事件分配给window.event。

＆＃13;

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);

＆＃13;

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

＆＃13;

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

<强>更新

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

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

＆＃13;

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;

＆＃13;

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

＆＃13;

Firefox缺少window.event的解决方法？

1 个答案: