javascript - 销毁 ev.preventDefault()

Question

当我尝试通过 ev.preventDefault() 使用对象解构时，我在 Chrome 中收到以下错误:

未捕获的类型错误:非法调用

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

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

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

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

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

Answer 1

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

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