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

Javascript:`location.hash`对于指向隐藏元素的链接,第一次单击时返回`#/`,javascript,Javascript,我有一个非常简单的片段链接,如下所示: <a href="#foo" onclick="function()">blah</a> 然后,函数依赖于参数,而不是location.hash。一切正常。这是一个丑陋的黑客没有回答这个问题 背景知识: 这些链接在大型文档中执行向后跳转,从一个节到目录中该节的条目。用户可以单击标题中的章节号,然后导航到TOC中的相同章节号 现在的问题是TOC是可折叠的。如果用户跳回当前不可见的TOC部分,因为该部分已折叠,该怎么办?onclick

我有一个非常简单的片段链接,如下所示:

<a href="#foo" onclick="function()">blah</a>
然后,函数依赖于参数,而不是
location.hash
。一切正常。这是一个丑陋的黑客没有回答这个问题

背景知识: 这些链接在大型文档中执行向后跳转,从一个节到目录中该节的条目。用户可以单击标题中的章节号,然后导航到TOC中的相同章节号

现在的问题是TOC是可折叠的。如果用户跳回当前不可见的TOC部分,因为该部分已折叠,该怎么办?
onclick
函数在文档中做了正确的事情来扩展TOC部分及其所有父部分,从而允许跳转发生


当该函数被正确地告知链接片段标识符时,这个扩展逻辑每次都可以正常工作(在出现问题的同一个浏览器中;我还没有在不同的平台和其他浏览器上尝试不同版本的Firefox)。

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

如果要在链接之后运行函数,则需要执行以下操作:

onclick="setTimeout(function() {myFunctionName('foo');},10);"
onclick="doSomething(this);"
编辑

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

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

doSomething(theLink)
中,您可以参考
theLink.getAttribute(“href”)
,并相应地采取行动。

在遵循链接之前运行
onclick
功能。这样,您就可以使用
event.preventDefault()
取消事件,并停止浏览器导航

如果要在链接之后运行函数,则需要执行以下操作:

onclick="setTimeout(function() {myFunctionName('foo');},10);"
onclick="doSomething(this);"
编辑

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

onclick="setTimeout(function() {myFunctionName('foo');},10);"
onclick="doSomething(this);"
doSomething(theLink)
中,您可以参考
theLink.getAttribute(“href”)
并相应地采取行动。

看起来像是一个浏览器错误 在同一浏览器会话中,我加载了这个最小的复制示例:

<!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>
如您所见,在第一次单击中,它是空白的。(但不像我的文档中那样:它只是一个空字符串!)之后,它拒绝再重新编译

我重启了Firefox,问题似乎消失了我从实际代码中删除了参数传递变通方法,但它仍然有效。

看起来像是浏览器错误 在同一浏览器会话中,我加载了这个最小的复制示例:

<!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>
如您所见,在第一次单击中,它是空白的。(但不像我的文档中那样:它只是一个空字符串!)之后,它拒绝再重新编译


我重启了Firefox,问题似乎消失了我从实际代码中删除了参数传递变通方法,但它仍然有效。

事实上,它是先运行的,我的功能依赖于此。(请参阅我刚才添加的背景信息。)处理程序能够使链接的目标可见,因此可以进行导航。我知道
preventDefault
。我不希望函数在链接之后运行;在这种情况下,这是不可能的/不合逻辑的。我已经在文档的一些地方使用了
this
onclick
。通过从不同的对象中提取属性,这可能解决了问题。现在似乎没有意义了。我将保留我原来的解决方法,以防这个bug在某个地方出现。事实上,它是先运行的,我的功能依赖于此。(请参阅我刚才添加的背景信息。)处理程序能够使链接的目标可见,因此可以进行导航。我知道
preventDefault
。我不希望函数在链接之后运行;在这种情况下,这是不可能的/不合逻辑的。我已经在文档的一些地方使用了
this
onclick
。通过从不同的对象中提取属性,这可能解决了问题。现在似乎没有意义了。我将保留我原来的解决方法,以防这个bug在某个地方出现。你能提供一个这个问题的实例吗?如果不推荐使用
..
,您应该使用
..
。您能提供一个问题的实例吗?如果不推荐使用
,则应使用