如何禁用掉a标签的默认事件？

在前端开发中，禁用 a 标签的默认事件（例如跳转到 href 指定的 URL）有多种方法：

1. 使用 preventDefault() 方法: 这是最常用的方法。 在 a 标签的点击事件处理函数中调用 event.preventDefault() 即可阻止默认行为。

   const link = document.getElementById('myLink');
   
   link.addEventListener('click', function(event) {
       event.preventDefault();
       // 在这里添加你想要执行的自定义代码
       console.log("Link clicked, but default action prevented.");
   });
   

   <a href="https://www.example.com" id="myLink">Example Link</a>
   

2. 返回 false: 在事件处理函数中返回 false 也可以阻止默认行为。 这种方法主要用于内联 JavaScript 代码。 需要注意的是，这种方法在现代 JavaScript 中已不太推荐使用，preventDefault() 更为清晰和可靠。

   <a href="https://www.example.com" onclick="return false;">Example Link</a>
   <a href="https://www.example.com" onclick="handleClick(event); return false;">Example Link</a>
   
   <script>
     function handleClick(event) {
       // some custom logic
     }
   </script>
   

3. 将 href 属性设置为 javascript:void(0) 或 #: 这是一种比较老旧的方法，虽然有效，但不太推荐。javascript:void(0) 会执行一个空的 JavaScript 表达式，而 # 会跳转到页面顶部。 如果你的目标仅仅是阻止跳转，使用 preventDefault() 是更清晰和语义化的选择。

   <a href="javascript:void(0)" onclick="myFunction()">Example Link</a>
   <a href="#" onclick="myFunction()">Example Link</a>
   

4. 使用空的 href 属性: 直接移除或不设置 href 属性也可以阻止默认跳转行为，但会使链接失去一些默认样式，例如指针光标。 如果需要保持链接样式，最好使用其他方法。

   <a href="" onclick="myFunction()">Example Link</a>
   

选择哪种方法？

preventDefault() 方法是最推荐的做法，因为它清晰地表达了你的意图，并且与现代 JavaScript 事件处理模型兼容性最好。 避免使用 javascript:void(0) 和 #，除非你有特定的理由需要使用它们。 返回 false 的方式也尽量避免，因为它不如 preventDefault() 清晰。

示例：使用 preventDefault() 阻止链接跳转并执行 AJAX 请求:

const link = document.getElementById('myLink');

link.addEventListener('click', function(event) {
    event.preventDefault();

    // 执行 AJAX 请求
    fetch(this.href)  // 使用链接的 href 属性作为 URL
        .then(response => response.text())
        .then(data => {
            // 处理 AJAX 响应数据
            console.log(data);
        });
});

<a href="/my-api-endpoint" id="myLink">Example Link</a>

在这个例子中，点击链接后会阻止默认的跳转行为，并发起一个 AJAX 请求到链接的 URL。 这是一种常见的应用场景，例如在单页应用 (SPA) 中使用。