Anchor or Button

Question

Which element should be used for JavaScript actions?

Actions that do something like play / pause / stop / new / open / save / print / close, etc.

<a id="play" href="#">Play</a> <a href="#play">Play</a> <button id="play" tabindex="0">Play</button> <div id="play" role="button" tabindex="0">Play</div> 

I see that many people use <a> bindings with href="#" , but don’t feel very semantic, he feels that the bindings for hyperlinks point to a resource, not to actions that do things. Then you have to hack it with event.preventDefault (i.e. return false ).

I rarely see people using the <button> element, but shouldn't it be used?

Answer 1

The best way to decide which element has the best semantics for JS-based user interaction is to ask what you want if JS ( which it will fail).

Think progressive improvement . Think Unobtrusive JavaScript .

Should the user just go to another page? Use the link. href will be back up from the moment JS crashes.

Should the user go to another page when sending some data or receiving a POST request? Use the button, place it on the form.

Is any server redundancy impossible? Use <button type="button"> and consider generating it from the JS / DOM instead of HTML.

Answer 2

This is a preference and a bit more.

Here is a rule of thumb:

• For navigation, just use anchor to style it and let it use the href attribute well.
• For quick actions (play, pause, stop, + 1) just use the button . doesn't have href for any reason!

Consider this code.

 const anchor = document.getElementsByTagName('a')[0] const button = document.getElementsByTagName('button')[0] anchor.addEventListener('click', e => { console.log('anchor clicked') e.preventDefault() }, false) button.addEventListener('click', e => { console.log('button clicked') }) 

 a { text-decoration: none; padding: 2px; } button { background: none; border: none; font-size: 16px; } .btn { background-color: blue; color: white; display: inline-block; text-align: center; } 

 <a class="btn" href="#"> Anchor </a> <hr/> <button class="btn" type="button"> Button </button> 

Styling

Both of them look almost the same (with minimal justification), the only problem is that you have to undo some styles that come with the button as border and background , but with a snap you won’t get the click that you get with the button.

Functionality

But since binding <a> requires <a href="some/path"> to work, even if it's just # , if you don't need to navigate after clicking on the anchor, you will have to use e.preventDefault() in your javascript to prevent his.

I think there is more to it than just styling and functionality.

It’s just a programmer to think about them, and it’s best to pay attention to details, since button needs a special type attribute so that it works correctly Always and needs bindings e.preventDefault() .

Answer 3

Then you have to hack it with event.preventDefault

You can set href as javascript:void(0) , not #, which will prevent execution without using event.preventDefault()

But buttons are probably better for this kind of thing.

Answer 4

This is a preferable thing.

Personally, I prefer to use the <button> button or create my own.

If you find it more useful to use the <button> tag button, use it. If it works, it is not. =)