在 `a` 标签中使用 `preventDefault()` 方法

在前端开发中，<a> 标签是常用的 HTML 标签之一，通常用于创建链接。但有时我们希望在用户点击链接时阻止默认的行为（即链接跳转），这时就可以使用 preventDefault() 方法。

preventDefault() 方法简介

preventDefault() 是一个 JavaScript 方法，它可以阻止默认的事件行为。当调用该方法时，浏览器将不再执行事件的默认行为，例如在 <a> 标签中，防止页面跳转。

使用 preventDefault() 方法的场景

在以下场景中，我们可能需要使用 preventDefault() 方法：

• 阻止链接跳转：当我们想要展示一个模态框或者提示框时，需要通过 preventDefault() 方法来阻止页面跳转。
• 自定义链接行为：当我们需要自定义链接的行为时，可以通过 preventDefault() 方法来阻止默认的链接跳转行为，并编写自己的逻辑代码。

示例代码

<!-- HTML 代码 -->
<a href="#" id="myLink">点击我</a>

// JavaScript 代码
document.getElementById("myLink").addEventListener("click", function(event){
  event.preventDefault();
  // 在这里编写自定义的逻辑代码
});

在上面的示例中，我们首先获取了 ID 为 myLink 的 <a> 标签元素，然后添加了一个点击事件监听器。当用户点击链接时，event.preventDefault() 方法会阻止默认的链接跳转行为，我们可以在该方法调用后编写自己的逻辑代码。

总结

使用 preventDefault() 方法可以轻松地阻止默认的事件行为，例如在 <a> 标签中，阻止页面跳转。同时，它还可以帮助我们实现自定义的事件逻辑。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10775