共计 951 个字符，预计需要花费 3 分钟才能阅读完成。
拖延俱乐部
2023-06-01 14:43:51
浏览数 (1237)
很多前端开发者都熟悉在 HTML 中使用 “javascript:;” 语法来防止点击链接时页面跳转。虽然这种方法可以实现预期的效果，但它存在一些缺点，比如可能会给用户造成困惑，还有可能影响搜索引擎优化（SEO）。
在 JavaScript 中，我们也可以使用类似的语法来实现类似的效果，即通过事件监听器来阻止默认行为。但是，和在 HTML 中使用 “javascript:;” 一样，这种方法也存在一些问题，特别是当代码逐渐变得复杂时。
下面我们将介绍如何避免在 JavaScript 中使用 “javascript:;” 语法，并给出具体的实例。
1. 使用 event.preventDefault()
event.preventDefault() 可以阻止浏览器执行与事件关联的默认动作，比如在某个元素上单击时打开链接。这种方法不仅简单易用，而且对于大多数情况都非常有效。
例如，在以下代码中，我们通过添加一个单击事件监听器来防止链接在单击时打开：
const link = document.querySelector('a');
link.addEventListener('click', function(event) {event.preventDefault();
});
2. 返回 false
在一些旧版的 JavaScript 中，返回 false 也被广泛用于阻止默认行为。这种方式看起来很简洁，但是也有一些缺点。首先，它不够直观，可能会给其他开发者带来困惑。其次，在某些情况下，返回 false 可能会导致代码出现奇怪的行为。
以下是使用返回 false 阻止默认行为的示例：
const link = document.querySelector('a');
link.onclick = function() {
// do something
return false;
};
总之，我们应该避免在 JavaScript 中使用 “javascript:;” 语法，而是使用 event.preventDefault() 或返回 true / false 来阻止默认行为。这种方式更加直观、可靠，并且可以增强代码的可读性和可维护性。
原文地址: 如何避免在 JavaScript 中使用 “javascript:;” 语法
