破坏ev.preventDefault（）

Question

当我尝试将对象解构与ev.preventDefault()一起使用时，我在Chrome中收到以下错误：

Uncaught TypeError: Illegal invocation

但是，当我使用ev.preventDefault()而不进行解构时，它可以正常工作。重现此问题的代码如下所示。

＆＃13;

＆＃13;

const button = document.getElementById(`test-button`);

button.onclick = ({ preventDefault }) => {
  preventDefault();
};

＆＃13;

<button id=test-button type=button>Click me to see the error</button>

＆＃13;

＆＃13;

＆＃13;

知道为什么会这样吗？或者我如何使用事件对象使用对象解构？

Answer 1

preventDefalt是必须在事件对象上调用的方法，以了解要阻止的默认值。当您只执行preventDefault()时，这不是方法调用语法，并且无法找到事件对象：非法调用。解构语法只是访问该值，它不会自动绑定任何函数。

 button.onclick = (e) => {
   const { preventDefault } = e; // like const preventDefault = e.preventDefault;
   preventDefault(); // does not work, unlike preventDefalt.call(e)
};