115

I want to author an anchor tag that executes some JavaScript and then proceeds to go wherever the href was taking it. Invoking a function that executes my JavaScript and then sets window.location or top.location to the href location doesn't work for me.

So, imagine I have an element with id "Foo" on the page. I want to author an anchor similar to:

<a href="#Foo" onclick="runMyFunction(); return false;">Do it!</a>

When this is clicked, I want to execute runMyFunction and then jump the page to #Foo (not cause a reload - using top.location would cause it to reload the page).

Suggestions? I am happy to use jQuery if it can help here...

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
psychotik
  • 38,153
  • 34
  • 100
  • 135

4 Answers4

161

Just return true instead?

The return value from the onClick code is what determines whether the link's inherent clicked action is processed or not - returning false means that it isn't processed, but if you return true then the browser will proceed to process it after your function returns and go to the proper anchor.

Amber
  • 507,862
  • 82
  • 626
  • 550
  • 1
    What if onclick doesn't return anything? – maciek May 05 '15 at 08:40
  • 1
    @maciek then the return value is treated as `undefined` which is considered false for these purposes. – Amber May 06 '15 at 01:05
  • 1
    In the past whenever I'd use use a js function to launch a new page, and put just a "#" for the href attribute, I'd return "-1" to prevent the default action, which is usually the browser jumping tot he top of the page, or sometimes I'd just not return anything. Lately I've had to revise all those pages as @Amber advised... to specifically return false, if I don't want the page to jump. – Randy Aug 12 '15 at 14:44
  • 3
    @Amber seems like if onclick doesn't return anything, the link's inherent clicked action will be processed. – iplus26 Dec 22 '15 at 02:32
  • Also you shouldn't use event.preventDefault() on click event handler. – Ruben Jul 08 '16 at 18:09
  • 3
    @Ruben could you please explain why you shouldn't use event.preventDefault() on click event handler? – David Maness Jan 14 '20 at 16:36
42
<a href="#Foo" onclick="return runMyFunction();">Do it!</a>

and

function runMyFunction() {
  //code
  return true;
}

This way you will have youf function executed AND you will follow the link AND you will follow the link exactly after your function was successfully run.

n1313
  • 20,555
  • 7
  • 31
  • 46
7

If the link should only change the location if the function run is successful, then do onclick="return runMyFunction();" and in the function you would return true or false.

If you just want to run the function, and then let the anchor tag do its job, simply remove the return false statement.

As a side note, you should probably use an event handler instead, as inline JS isn't a very optimal way of doing things.

peirix
  • 36,512
  • 23
  • 96
  • 126
0

When doing a clean HTML Structure, you can do this.

const element = document.getElementById('link_1')
element.onClick = function (e) {
    e.preventDefault()
    window.open('_top', element.getAttribute('href'))
}

Using jQuery

$('a#link_1').click(function (e) {
    e.preventDefault()
    const a = e.target
    window.open('_top', a.getAttribute('href'))
})
Carl James Omandam
  • 1
  • 2