jQuery / Javascript - 当另一个元素离页更新时，如何防止当前单击的项目失去焦点答案

【问题标题】：jQuery/Javascript - how do you prevent the currently clicked item from losing focus when another element offpage is updatedjQuery / Javascript - 当另一个元素离页更新时，如何防止当前单击的项目失去焦点
【发布时间】：2021-02-22 04:33:02
【问题描述】：

假设您有一个位于最顶部的 div（通常是屏幕外，由于页面较长），当点击一堆链接（滚动也离开页面）中的任何一个时，它会更新为 .append()。如何防止 Chrome 在每次点击链接后自动滚动到顶部？

类似的东西

<div id="updateme"></div>

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

【问题讨论】：

标签： javascript jquery google-chrome

【解决方案1】：

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

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

相反，您可以完全删除 href，但我打赌您想要 href 为您提供的样式。我建议使用 css 来设置 a 的样式，使其看起来和行为像一个链接（这可能是最简洁的方法），但如果你愿意，你也可以这样做：

<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();
});

【讨论】：

【解决方案2】：

我强烈认为 Chrome 不会滚动到顶部，因为您正在更新 updateme 元素的内容，而是因为您的链接指向 #，它就像页面顶部的锚点一样。

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

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

【讨论】：