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

Question

Suppose you have a div that is at the very top (usually offscreen, due to a long page) that is updated with .append() when any of a bunch of links (scrolling also offpage) is clicked. How do you prevent Chrome from scrolling to the top automatically after each of the link clicks?

Something like this

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

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

Answer 1

I strongly assume that Chrome doesn't scroll to the top because you are updating the content of the updateme element, but because your link points to # , which acts like an anchor on top of the page.

Personally I'm not a big fan of using href="#" , because it makes it possible to middle-click or Ctrl+click the link, opening it in a new tab, which is not an intended functionality. I prefer using href="javascript:" , but maybe there is an even better way that I don't know about.

If you want to leave the link as it is, to prevent Chrome from scrolling up when clicking the link, you have to make sure that only the click handler is run when you click the link, and Chrome doesn't actually navigate to the href you have specified, use onclick="event.preventDefault(); DoAppendUpdateMe()" (see preventDefault ).

Answer 2

There are several ways to solve this, and it is because you are using an anchor hashtag (#).

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

Instead, you could remove the href altogether but I am betting you want the style that href gives you. I would recommend using css to style the a to look and act like a link (which is probably the cleanest method), but you can also do this if you like:

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

This could also be covered with a little javascript when the page finishes loading as well if desired, since you listed jquery, it could be something like:

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

If going the above route, just in case these are dynamically loaded in, you might want something like:

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