How can I specify an anchor tag behaves like a hyperlink, without an href and without an anchor name?

Question

Okay so this one has some similar threads but I couldn't find anything that nailed it on the head, so here we go.

I'm trying to simulate a link using the anchor tag, like so:

<a onClick="javascript: DownloadPorn();">Click Here!</a>

All of this works fine and dandy; the link shows, I can click it, and my javascript method is successfully executed.

The question here, is how can I correctly force the link to display in the 'same manner' as an actual 'HTML Link'? Or rather, in the 'same manner' as if I were to have an href in the above mentioned tag; like so:

<a href="#" onClick="javascript: DownloadMorePorn();">Click Here!</a>

Now... THIS Code snippet forces the link to display in the manner that I expect it to, but in using this method, when a link is clicked, the scroll location is bounced back to the top.

It's probably clear, that this is not an intended behavior for the framework I am trying to develop. If anyone has any suggestions to overcome this particular issue, I would greatly appreciate your input.

--- While typing this all up, I considered that I could place a static anchor at the top of the screen( say 0,0 or -,- ), and force all of my links to reference that anchor. If anyone sees any viability in this solution, I'm likely to explore it.

--- Edited ---

Accepted Answer:

In order to have an anchor behave as a hyperlink, without manipulating the browsers current position; utilize a Javascript method returning nothing(?) in the href attribute, or a valid return of 'false' in one of the alternate event handlers for an anchor, I.E. the onClick method.

Possible solutions:

<a href="javascript: DoSomething();">Link</a>
<a href="javascript: void(0);" onClick="javascript: DoSomething();">Link</a>
<a href="#" onClick="javascript: DoSomething(); return false;">Link</a>

Thanks again, everyone.

--- End Edit ---

"how can I correctly force the link to display in the 'same manner' as an actual 'HTML Link'?" Do you mean in the status bar? — j08691, Dec 12 '12 at 18:13
I'm not sure how the method name is relevant... And I meant from the clients perspective on mouse over, j08691. And why can't I thank people ahead of time -_- — DigitalJedi805, Dec 12 '12 at 18:16

score 1 · Answer 1 · edited May 23 '17 at 12:29

Set the href to javascript:void(0);, this will mean the browser displays the link as if it had a real href:

<a href="javascript:void(0);" onClick="javascript: DownloadBooks();">Click Here!</a>

There are other methods such as setting the href to #, but the advantage of the one shown is that you don't have to worry about returning false or specifying return DownloadBooks().

This question has some good info about the use of javascript:void(0).

score 1 · Answer 2 · answered Dec 12 '12 at 18:15

1

Set the javascript function to the href.

<a href="javascript:DownloadPorn();">Click Here!</a>

Edit: Just to note some consider this bad practice.

answered Dec 12 '12 at 18:15

James Kleeh

12,094
5
34
61

2

The problem with this is if you set the click event handler via Javascript instead of inline, you'll end up with both an onclick handler and the href calling the function. The other problem with this is you don't have a reference to the object with `this` unlike the onclick handler. You can't pass anything about the object. – MrCode Dec 12 '12 at 18:18
So in effect this still achieves what I intended to, but with less extensibility. ( How is extensibility not a word... ) – DigitalJedi805 Dec 12 '12 at 18:33

score 1 · Accepted Answer · answered Dec 12 '12 at 18:33

If you use return false at the end of your onclick attribute it will not make it scroll anywhere.

<a href="#" onClick="someFunc(); return false;">Click Here!</a>

or you can make your function return false, and return its result (false) as well as execute it in the onclick attribute, which is shorter:

<script type="text/javascript">
function someFunc() {
    // all your function code here
    return false;
}
</script>
<a href="#" onClick="return someFunc()">Click Here!</a>

How can I specify an anchor tag behaves like a hyperlink, without an href and without an anchor name?

3 Answers3