空 URL 哈希导致页面跳转到 js 事件

Posted 2023-02-22

【中文标题】空 URL 哈希导致页面跳转到 js 事件

【英文标题】：Empty URL hash causes page to jump on js events

【发布时间】：2013-11-12 17:28:30

【问题描述】：

我有一个带有下一个和上一个按钮的照片库。如果单击其中一个按钮时由于某种原因我的一种 javascript 方法被破坏，它将向 url 添加一个哈希，即 www.google.com# 。我知道哈希可以被赋予一个 div id 以跳转到页面的该部分，但是当它为空白时，它会在我的页面周围跳转几次，我不确定它的目标是什么。我曾想过尝试从 url 中删除哈希，但随后我必须确保在每个操作中都这样做，这似乎是一种不好的做法。如果哈希对页面上的操作没有影响，我更愿意。

【问题讨论】：

“空白哈希”通常会将您的浏览器窗口带到页面顶部。

通读一下：***.com/questions/1357118/… 听起来您需要阻止默认事件。

我知道要防止默认值，但是如果锚标记href 中的哈希值不正确，那么更容易更改，然后附加处理程序以防止所有内容的默认值。我最大的问题是javascript坏了，所以如果可以避免的话，我不想用js来解决它。

【参考方案1】：

我猜 Next And Prev 按钮有 <a href="#" ...</a> 之类的标记。在这种情况下，您可以使用 jquery 将事件侦听器添加到这些链接

$('#prev, #next').on(
    'click': function(e) 
         e.preventDefault();
     
)

并避免通过浏览器更改位置。或者在纯javascript中：

document.querySelectorAll('#prev, #next').addEventListener('click', function(e) 
    e.preventDefault();
,false)
//Note: this code is not cross-browser

【参考方案2】：

不要用href="#"，不合适。

改为使用href="javascript:;"或其变体（我个人使用javascript:void(null);） 这明确表明该链接不会转到其他位置，而是由 JavaScript 处理。

【讨论】：

这是我担心的。我知道在某些时候它都设置为 href='/' 而现在大多数都是 href='#' 但更改它可能是最简单的解决方案。

我看不出href="#" 是如何“不恰当”的，它只是一个指向书签的链接。使用href="javascript:;" 不会告诉浏览器脚本正在处理该操作，它会询问href 中的脚本要导航到的位置。由于脚本的值为undefined，因此浏览器无法导航到任何地方。

【参考方案3】：

当您不想执行导航功能时，不要使用锚标记。使用button