jQuery/Javascript -如何防止当前点击的项目失去焦点时，另一个元素的页面外更新 &g

Question

假设您有一个位于最顶部的div(通常在屏幕外，由于页面很长)，当单击任何一堆链接(滚动也在页面外)时，该div将使用.append()更新。如何防止Chrome在每次点击链接后自动滚动到顶部?

像这样

<div id="updateme"></div>
<a href="#" onclick="DoAppendUpdateMe()"><img></a>
...
[hundreds more]

Answer 1

有几种方法可以解决这个问题，这是因为您使用了锚定标签(#)。

<a href="#" onclick="DoAppendUpdateMe()"><img></a>

相反，你可以完全删除href，但我打赌你想要的是href给你的样式。我建议使用css样式和看起来像一个链接(这可能是最干净的方法)，但你也可以这样做，如果你喜欢:

<a href="javascript:void(0)" onclick="DoAppendUpdateMe()"><img></a>

如果需要，也可以在页面完成加载时用一点javascript来覆盖，因为您列出了jquery，它可以是这样的:

$('a[href="#"]').on('click', function(e) {
e.preventDefault();
});

如果按照上面的路线，为了防止这些是动态加载的，你可能想要这样做:

$('#updateme').on('click', 'a[href="#"]', function(e) {
e.preventDefault();
});

Answer 2

我强烈认为Chrome不会滚动到顶部，因为你正在更新updateme元素的内容，但因为你的链接指向#，它的作用就像一个锚在页面的顶部。

就我个人而言，我不是使用href="#"的大粉丝，因为它可以中键或Ctrl+点击链接，在一个新的选项卡中打开它，这不是一个预期的功能。我更喜欢用href="javascript:"，但也许有一个更好的方法，我不知道。

如果你想让链接保持原样，为了防止Chrome在点击链接时向上滚动，你必须确保只有点击处理程序在点击链接时运行，并且Chrome实际上不会导航到你指定的href，使用onclick="event.preventDefault(); DoAppendUpdateMe()"(见preventDefault)。