Question

我有一个非常简单的片段链接：

<a href="#foo" onclick="function()">blah</a>

此链接的目标是<a name="foo">...</a>元素，该元素位于隐藏 <div>中。

function只会将location.hash的值转储到Javascript控制台。

问题：链接必须点击两次才能显示正确的hash。

第一次单击链接时，location.hash将返回字符串"#/"（哈希斜杠）。这匹配完整location.href中的内容：完整的URL以散列斜杠结尾。

第二次点击链接时，会显示正确的字符串"#foo"，然后显示。

在后续点击中，该值也是正确的并保持这种状态，直到<div>被切换（显示然后再次隐藏，通过页面中与链接无关的其他一些脚本或function）。然后重新出现该问题：第一次单击返回伪造的哈希斜杠。

如果目标<div>可见，则不会发生此问题;在所有点击下，.hash都是正确的。

浏览器是Ubuntu 11上的Firefox 42.0。

让location.hash每次点击都返回正确的数据有什么诀窍？

解决方法：

我调整了我的HTML生成器输出：

<a href="#foo" onclick="function('foo')">blah</a>

然后该函数依赖于参数而不是location.hash。一切正常。这是一个丑陋的黑客，并没有回答这个问题。

背景：

这些链接在大型文档中执行向后跳转，从一个部分到内容列表中该部分的条目。用户可以单击标题中的节号，然后导航到TOC中的相同节号。

现在的问题是TOC是可折叠的。如果用户跳回到因崩溃而当前不可见的TOC部分会怎么样？ onclick函数在文档中做了正确的事情来扩展TOC部分及其所有父节点，允许跳转。

当正确地通知该功能链接片段标识符时，此扩展逻辑每次都能正常工作（在同一浏览器中有问题;我还没有在不同平台和其他浏览器上尝试不同版本的Firefox）。

Answer 1

在跟踪链接之前，onclick函数运行。这样您就可以使用event.preventDefault()取消活动并停止浏览器导航。

如果您希望在遵循链接后运行该功能，则需要执行以下操作：

onclick="setTimeout(function() {myFunctionName('foo');},10);"

修改

如果您想要点击链接中的其他信息，请尝试以下操作：

onclick="doSomething(this);"

在doSomething(theLink)中，您可以参考theLink.getAttribute("href")并采取相应行动。

Answer 2

看起来像浏览器错误

在同一个浏览器会话中，我加载了这个最小的repro示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Foo Bar</title>
<script type="text/javascript">
function jump() {
  console.log("hash = " + location.hash);
}
</script>
</head>
<body>
<a name="abc">ABC</a>

<a href="#abc" onclick="jump()">Jump to ABC</a>
</body>
</html>

请注意，在上面的内容中，我忘了隐藏目标。它仍然可以在控制台中使用以下输出重现，只有一次（重新格式化为列，近似于它在GUI）：

hash =                        click-issue.html:8:3
hash = #abc                   click-issue.html:8:3

如您所见，在第一次单击时它是空白的。（但不像我的文档中那样#/：它只是一个空字符串！）之后它再次拒绝重新发送。

我重新启动了Firefox，问题似乎已经消失。 我从我的真实代码中移除了参数传递解决方法，无论如何它都在工作。

Javascript：`location.hash`指向隐藏元素的链接首次点击时返回`＃/`

解决方法：

背景：

2 个答案:

看起来像浏览器错误