In Firefox, double-clicking on an a tag with href set to # but with onclick set to bring us to another page will effectively make us remain on the current page

Question

Suppose we have the ff. in a.html:

<script>
  function onClick() {
    // Do some important stuff and then...
    location = "b.html";
  }
</script>
<a href="#" onclick="onClick();">Link</a>

Double-clicking on Link will trigger the event-handler onClick. However, the second click in the double-click seems to be interpreted as another click and causes the page to jump to the named anchor. In effect, the location isn't changed.

My questions are:

1. Is this a browser bug or feature?

2. Is there a way to work-around this behavior?

Answer 1

You could try

href="javascript:void(0);"

instead

Answer 2

Use window.location = "b.html". location by itself has no special meaning.

The anchor jumping is unrelated. You can disable it by stopping the event.

function onClick(event) {
  event.preventDefault();
  event.stopPropagation();
}

<a href="#" onclick="onClick(event)">Link</a>

Answer 3

gshankar is right

Another variant:

<script>
  function onClick() {
    location = "b.html";
    return false;
  }
</script>
<a href="#" onclick="return onClick();">Link</a>

Answer 4

Or you can point the link at the function and skip the onclick event:

<script>
  function onClick() {
    location = "b.html";
    return false;
  }
</script>
<a href="javascript:onClick();">Link</a>