On Click Elements in a Single Page App - Buttons, Links or Paragraphs?

Coffee Lounge
#1

So I’m creating a single page app.

There are a gzillion things my users can click on to make things happen. Some appear as text, some as icons, and some as buttons.

But since it is a single page, their clicks never result in taking them to another page. I’m just doing on Click Dynamic Events or Form Submission to make something happen.

So I’m sitting here wondering what the clickable elements should be which aren’t doing form submissions…

  • Links with href="#"?
  • Paragraphs?
  • Buttons styled as text?
  • Something else I didn’t think of?

I’d love to hear your views on the pros and cons! :slight_smile:

Best wishes,
Antony.

#2

Honestly, it does not really matter as long as the element you add can take an href="" parameter by default such as <a>, <area>, <base>, <link>

Almost any other tag can take an onclick event so they can also act like href tags and still take you to a target of your choosing.

A <p> paragraph tag alone can not take an href however can have any number of <a> tags embedded into the paragraph so it makes no difference.

In situations where you want to use dynamic attributes you can have the dmx-bind:href="" and lastly there are the Routing style links which you would probably be most interested in using with an SPA.
Screenshot 2020-01-16 at 07.08.53

#3

You can add click event on any not disabled element. So it is more up to you where to add it so it is clear to the user that the element is clickable. See:

Also useful to take some UX in consideration:


#4

Thanks for the feedback George!

So I’ve discovered what does matter is if I am planning to load another page or not.

So far, I have a single page app without routing… which means literally all the HTML for all the different data views (or “windows” as I call them) within the app is stored within my index.php file. I use a variable called window_mode which has values such as login_login or app_contacts to determine which “window” is visible at any one time.

And with that setup, I’ve discovered the <a> tag is not very useful… as with an href of #, it reloads the page and resets other variables which control what is being seen.

So for now, I am using styled buttons!

#5

If you insist on using anchor tags, just don’t use href="#", but instead use href="javascript:void(0)"
Buttons are just fine as well…

1 Like