当我们单击一个链接时，通常会出现页面跳转或执行一些 JavaScript 代码。但是，有时候我们希望防止页面滚动到顶部，以提供更好的用户体验。本文将介绍如何在单击链接时阻止网页滚动到顶部。
防止默认行为
首先，我们需要了解事件传播和默认行为。在 JavaScript 中，事件可以冒泡或捕获，这意味着当你单击一个链接时，该事件会从最内部的元素开始向外传播，直到达到文档根元素。在这个过程中，默认行为可能会被触发，例如页面滚动到顶部。
要防止默认行为，我们可以使用 preventDefault() 方法。该方法可以阻止事件的默认行为，并停止事件的传播。例如，以下代码将防止链接的默认行为：
document.querySelector('a').addEventListener('click', function(event) {
event.preventDefault();
});这样，当您单击链接时，不会出现页面滚动到顶部的情况。
阻止事件传播
除了防止默认行为外，我们还可以阻止事件的传播，以避免其他代码干扰我们的操作。例如，如果链接的父元素上也绑定了 click 事件而且执行了一些操作，则可能会影响我们的代码。
要阻止事件传播，我们可以使用 stopPropagation() 方法。当您调用此方法时，事件将不会继续向上传播。例如，以下代码将阻止链接的点击事件向上冒泡：
document.querySelector('a').addEventListener('click', function(event) {
event.stopPropagation();
});完整示例
以上方法可以组合使用，以确保链接不会滚动到顶部并避免事件干扰。以下是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------------------
-------
------
---- -----------------------
-- -------- ---------------------------
------
--------
--- ---- - -----------------------------------
------------------------------ --------------- -
-----------------------
------------------------
-- -----------
---
---------
-------
-------在此示例中，我们将防止链接默认行为和阻止事件传播。在 event.preventDefault() 和 event.stopPropagation() 之后，您可以添加您自己的代码来处理链接点击事件。
总结
使用 preventDefault() 和 stopPropagation() 方法可以在单击链接时防止网页滚动到顶部并避免事件干扰。通过组合使用这两种方法，您可以实现更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10232
