How can I add a self-referring onclick event to every <a>?

I have a single page app, for which I'd want to make sure link clicks don't get processed in the regular way, but are passed to my router instead. I therefore have the currently perfectly working menu code (where goto changes the HTML and returns false):

<a class="nav-link" href="/framework" onclick="return goto(this);">Home</a>
<a class="nav-link" href="/framework/register" onclick="return goto(this);">Register</a>
<a class="nav-link" href="/framework/login" onclick="return goto(this);">Log In</a>

Since every link gets the same onclick attribute anyway, is there some way I can write my links as

<a class="nav-link" href="/framework">Home</a>
<a class="nav-link" href="/framework/register">Register</a>
<a class="nav-link" href="/framework/login">Log In</a>

like I would on a non-SPA website, and have the onclick event be applied globally?

Solution

You can attach a click event listener.

$('a').click(function(e){
   goto(this);
   e.preventDefault();//don't navigate away
   /*we can't use return goto(this) because returning false in a jQuery event handler 
      also stops event propagation */
});

If your anchor elements are dynamic, you can use event delegation.

$(document).on('click', 'a', function(e){
   goto(this);
   e.preventDefault();//don't navigate away
});