如何在通过onclick绑定的自定义函数中使用JavaScript的event.preventDefault()方法？

嘿，我懂你更偏爱用HTML内联onclick的方式绑定函数，那咱们直接来解决这个问题～

你之前的代码之所以没法正常调用event.preventDefault()，核心原因是没有把事件对象传递给你的myfun函数。当你写onclick="myfun()"时，函数执行时没有拿到事件参数，自然event就是undefined，调用方法就会报错。

这里有两种简单的解决办法：

方法一：在onclick中直接传递event参数 #

直接在HTML的onclick属性里把浏览器提供的event对象传给函数：

<a id="myAnchor" href="#" onclick="myfun(event)">Click Me </a>

对应的JavaScript代码不用改，还是你原来的写法就行：

function myfun(event) {
  event.preventDefault();
  alert("OK");
}

这里的event是浏览器在事件触发时自动提供的全局事件对象（非严格模式下可用），传递给函数后就能正常调用preventDefault()阻止默认跳转了。

方法二：通过arguments获取事件对象（不用传参） #

如果不想在HTML里写参数，也可以在函数内部通过arguments获取事件对象——因为内联事件触发时，浏览器会把事件对象作为第一个参数传递给函数：

<a id="myAnchor" href="#" onclick="myfun()">Click Me </a>

对应的JavaScript代码调整一下：

function myfun() {
  const event = arguments[0];
  event.preventDefault();
  alert("OK");
}

这样也能拿到事件对象，实现同样的效果。

最后提一句：虽然这两种内联写法都能满足你的需求，但如果是规模较大的项目，还是更推荐用addEventListener的方式绑定事件——它更利于代码的分离和维护，还能给同一个元素绑定多个事件处理函数。不过既然你偏好内联写法，上面的方法完全够用啦～

内容的提问来源于stack exchange，提问作者Surya Neupane