CODEWITHSUNDEEP
javascriptjqueryhtmlhref
espresso_coffee
espresso_coffee

Reputation: 6110

Should I use on click instead of href?

I have few items in my navigation bar side and horizontal. Each item holds the link for different page. I have read few articles about href attributes. There is a lot of different opinions on what should be used especially in HTML5 since href is not required. I would like to hide the link if possible. One of the options is to use onClick function. Also there is big debate on if there should be javascript or # sign. For example:

Option 1

<a href="#" onclick="someFunction(e)"></a>

or Option 2

<a href="javascript:void(0);" onclick="someFunction(e)">

I was wondering if this is the best way to approach this. Also I saw few options where JQuery is involved but I'm not sure if that would be the best option. if anyone can help with this please let me know. I just want to use something that is well tested and will be a long term solution. Thanks in advance.

Upvotes: 0

Views: 2431

Answers (3)

sheriffderek
sheriffderek

Reputation: 9043

If you are actually linking to another HTML page with a URL... then use a link element and an href.

If you are in some framework and changing a route or view - or triggering some event - it's up to you. You can use buttons or any element or an <a> if you want, but you have a ensure to prevent the default behaviour of the link.

It sounds like your question is not between href or none - but between link or something else.

regular link

<a href='http://sheriffderek.consulting' target='sheriff'>link</a>

A fallback link for non-javascript sites? (not likely in 2017 unless you are a public library or something)...

<a href='http://sheriffderek.consulting' onclick='someFunction(e)'>js view trigger with fallback link</a>

another element

<button onclick="someFunction(e)">button</button>

Also - it depends on the framework. I believe Angular just says to use a link but leave off the href.

Upvotes: 2

rdimouro
rdimouro

Reputation: 223

The method you use to redirect the page (or invoke an event) really depends on what you are trying to achieve from the action and the overall user experience. There are cases where an href is more appropriate:

  • An image that is also a link
  • A word or phrase that is used as a link
  • An actual link you want displayed to the user

An onClick event of a button can be coded to achieve the same effect but with a different route. Perhaps the code will be more efficient or the User Experience is improved with a button click event than just an href.

The two main things to keep in mind are the user experience and design and then the security of the page. Always ensure that any link/redirection will never compromise the security of the page. This could potentially determine the method you need to use.

For additional info, you can start by reading the following link and then continuing through the rest of the stack exchange UX section of the site:

I hope it helps a little.

Action in href or onClick event?

Upvotes: 1

user3429660
user3429660

Reputation: 2722

Nowadays, I see most of the developers prefer "#" to "javascript:".

If I had to use onclick, I'd personally do it like this:

<a href="#" onclick="event.preventDefault(); someFunction();">Link</a>

Another example:

<a href="#" onclick="someFunction(event);">Link</a>
<script>
    someFunction = function(event) { 
        event.preventDefault();
        // do the work
    }
</script>

To answer one of your concerns, showing links in the page shouldn't be a security concern. Each server request must be protected against unauthorized calls, URL obfuscation will not help almost at all.

Upvotes: 1

Related Questions