jQuery / Javascript - 當另一個元素離頁更新時，如何防止當前單擊的項目失去焦點

Question

假設您有一個位於最頂部的 div（通常是屏幕外，由於頁面較長），當單擊一堆鏈接（滾動也離頁）中的任何一個時，它會使用.append()進行更新。 每次點擊鏈接后，如何防止 Chrome 自動滾動到頂部？

像這樣的東西

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

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

Answer 1

我強烈假設 Chrome 不會滾動到頂部，因為您正在更新updateme元素的內容，而是因為您的鏈接指向# ，它就像頁面頂部的錨點一樣。

就我個人而言，我不是使用href="#"的忠實擁護者，因為它可以中鍵單擊或 Ctrl+單擊鏈接，在新選項卡中打開它，這不是預期的功能。 我更喜歡使用href="javascript:" ，但也許還有一種我不知道的更好的方法。

如果您想保留鏈接原樣，以防止 Chrome 在單擊鏈接時向上滾動，您必須確保在單擊鏈接時僅運行單擊處理程序，並且 Chrome 不會實際導航到href您已指定，請使用onclick="event.preventDefault(); DoAppendUpdateMe()" （請參閱preventDefault ）。

Answer 2

有幾種方法可以解決這個問題，這是因為您使用的是錨標簽 (#)。

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