gpt4 book ai didi

javascript:避免浏览器在内容插入时滚动回顶部

转载 作者:行者123 更新时间:2023-11-30 18:09:45 25 4
gpt4 key购买 nike

我认为这很容易解决,但我似乎无法在任何地方找到解决方案。这是一个非常烦人的 javascript“功能?”。每次我向 div 添加内容时,文档都会滚动回顶部。我怎样才能避免这种烦人的行为?

n = 0;
function addContent() {
div = document.getElementById('content');
for(var i = 0; i < 100; i++) {
n++;
div.innerHTML = div.innerHTML + n + '<br />';
}
}

</script>
</head>

<body>
<div id="content"></div>
<a href="#" onclick="addContent()">more content</a>

例如:http://jsfiddle.net/hQP2q/

最佳答案

这里的问题是,

当您单击 anchor 链接时,会触发为该元素注册的 onclick 事件处理程序。

现在 anchor 标记的默认行为是导航到它自己的 href 属性。

在你的情况下,这两种情况都会发生,所以 url 被导航到“#”。 “#”充当书签,因此浏览器将查找任何具有 id 的 html 元素,与 url 中# 之后的字符串相同。

因此解决此问题的解决方案是,在您的 onclick 处理程序中传递事件对象,当执行 onclick 处理程序时,只需使用事件对象来阻止元素点击行为的默认操作。

所以代码修改后会是这样。

<script>
n = 0;
function addContent(e) {
div = document.getElementById('content');
for(var i = 0; i < 100; i++) {
n++;
div.innerHTML = div.innerHTML + n + '<br />';
}
e.preventDefault();
return false;
}

</script>
</head>

<body>
<div id="content"></div>
<a href="#" onclick="addContent(event)">more content</a>

请看这里的 fiddle :http://jsfiddle.net/uKrpH/2/embedded/result/

关于javascript:避免浏览器在内容插入时滚动回顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14889166/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com