Javascript: `location.hash` 对于隐藏元素的链接在第一次单击时返回 `#/`

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 是可折叠的。如果用户跳回到当前因折叠而不可见的目录部分怎么办？ onclick函数在文档中执行正确的操作来扩展该目录部分及其所有父项，从而允许跳转发生。

当该函数正确地获悉链接片段标识符时，此扩展逻辑每次都能正常工作(在出现问题的同一浏览器中；我尚未在不同平台和其他浏览器上尝试不同版本的 Firefox)。

Answer 1

onclick 函数在点击链接之前运行。这样您就可以使用 event.preventDefault() 取消事件并停止浏览器导航。

如果您希望在链接后运行该函数，您需要执行以下操作:

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

编辑

如果您想从所单击的链接中获取更多信息，请尝试以下操作:

onclick="doSomething(this);"

在 doSomething(theLink) 中，您可以引用 theLink.getAttribute("href") 并采取相应措施。