当我们在 HTML 中创建了一个链接，但是没有指定目标地址时，常见的做法是使用 href="#"。然而，这种写法会导致浏览器改变 URL 的哈希值，造成不必要的历史记录和滚动位置问题。本文将介绍如何防止这种情况的发生，并提供代码示例。
解决方案
一种简单的解决方案是使用 event.preventDefault() 方法来阻止默认行为。具体步骤如下：
- 给链接添加一个监听点击事件的函数；
- 在该函数中调用
event.preventDefault()方法； - 手动修改哈希值。
-- -------- --------------- ------
--------
----- ---- - --------------------------------
------------------------------ --- -- -
-------------------
------------- - ---------
---
---------在上述示例中，我们首先获取了 <a> 元素，然后给它添加了一个监听点击事件的函数。当用户点击链接时，浏览器默认会跳转到当前页面的顶部并更改 URL 的哈希值。为了阻止这种默认行为，我们调用 preventDefault() 方法。最后，我们手动将哈希值设置为我们想要的值。
值得注意的是，如果你有其他额外的需求，比如滑动到某个锚点位置，你需要结合 scrollIntoView() 方法和上述代码。
-- -------- --------------- ------
---- ---------- -------------- --------------
--------
----- ---- - --------------------------------
------------------------------ --- -- -
-------------------
------------- - --------
--------------------------------------------------
---
---------在这个示例中，我们在页面中添加了一个高度为 1000 像素的 <div> 元素。当用户点击链接时，浏览器会滑动到该元素所在的位置，并将 URL 的哈希值设置为 mydiv。
总结
使用 href="#" 创建链接是一种常见的做法，但它会导致浏览器改变 URL 的哈希值，进而造成一些不必要的问题。通过上述解决方案，我们可以简单、有效地防止这种情况的发生。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31513