单击内部锚点/哈希时自动更新 JavaScript 元素

Automatically update javascript elements when internal Anchor/Hash is clicked

本文关键字：更新 JavaScript 元素 哈希时 内部 单击      更新时间：2023-09-26

我想在单击链接时以id="demo"显示更新的锚点/哈希。文档的布局如下。

<html>
<head>
<script type="text/javascript">
function myfunction()
{
document.getElementById("demo").innerHTML=location.hash;
}
</script>
</head>
<body>
<h1>Javascript</h1>
<p id="demo">This is a paragraph.</p>
<a href="#example" onclick="myfunction()">here</a>
</body>
</html>

唯一的问题是，当单击链接时，javascript不会获得更新的锚点/哈希，直到第二次按下链接。

这是因为此时位置没有改变。您可以使用以下方法：

function myfunction() {
    // Sets the event handler once you click, so it will execute when
    // the hash will change.
    window.onhashchange = function() {
        document.getElementById("demo").innerHTML=location.hash;
    };
}

现代的方式是：

var hashchange;
function myfunction() {
    if ( !hashchange ) {
        hashchange = addEventListener( 'change', function() {
            document.getElementById("demo").textContent = location.hash;
            // If you want to remove the event listener right after,
            // you can do this:
            removeEventListener( hashchange );
        }, false );
    }
}

试试这个JQuery插件来检测哈希变化：

http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/

它是开源的，所以看看代码，它非常复杂——300+ 行（有注释，但仍然如此）。

试试这个：

function myfunction() {
  setTimeout(function() {
    document.getElementById("demo").innerHTML=location.hash;
  }, 1);
}

因为当您单击链接时，哈希仍然是您之前的哈希值，因此您需要延迟。

这是因为"位置"指的是页面中的锚点。

第一次点击时，您在页面中没有位置，但锚点会将您带到 #example，但这一切都发生在 onclick 完成其业务之后。第二次点击，我们有一个 #example 的位置。

请参阅此处的 W3 学校文档。

onclick 事件在定位点有机会完成其工作之前触发。这对于能够取消事件的传播并防止重定向等至关重要，但遗憾的是，您的代码会变得混乱。

相关文章：