/    Sign up×
Community /Pin to ProfileBookmark

Hyperlink vs onclick function

I’ve got extensive use of on click events within hyperlink tags

“`
<a href=”#” onclick=”myFunction();”>On Click Function Here</a>
<a href=”#” id=”myID”>Listen for Click on ID event</a>
“`

With these I’m using Javascript to load content into my page via fetch method.

I now have two issues

1) When I use the href=”#” and when a user clicks on it, I jump to the top of the page and back down? Why?

2) Bigger issue: A user wants to right click and open the link in a new tab?

How can enable something like this. This page is Main Content > Dynamically Loaded on event > Second dynamically loaded stuff.

If a user opened a new tab I would need third level content loaded not starting again.

to post a comment
JavaScript

9 Comments(s)

Copy linkTweet thisAlerts:
@kiwisauthorOct 06.2021 — Essentially, if it's left clicked on. The follow JS code. If right clicked I get the open in new tab option as if it were a URL?
Copy linkTweet thisAlerts:
@tracknutOct 07.2021 — Are you trying to make this code work for clients with no JS?

If not, I'm unclear why you're using the anchor tag, which is the one leading your user to the chance of opening in a new tab. You could just use a <p> tag with your onclick to accomplish the page loading?
Copy linkTweet thisAlerts:
@boohooOct 09.2021 — Links with href="#" jump to the top, because the purpose of hash links is to jump to certain sections. If you have an element with id="foo" or &lt;a name="foo"&gt;, #foo will scroll to the top of them. And since href="#" has no identifier, it jumps to the very top.

Answering your second question, it's quite complex to make it work like that from the scratch. It's the mix of reading the URL in JavaScript, manipulating history through History API and blocking default behavior. Have you considered using a framework or library to do that? If you'd like to learn, I'd start from reading about History API.

To make your links work like normal links, you'd have a static href in them just like with other links:
``html<i>
</i>&lt;a href="/foo"&gt;Go to foo&lt;/a&gt;<i>
</i>
`</CODE>

Then you could handle your link clicks by doing something like (simplified example, as it will make all links behave like that):
<CODE lang="javascript">
`javascript<i>
</i>document.body.addEventListener('click', event =&gt; {
const clickedLink = event.target.closest('a');

if (clickedLink === null) return;

event.preventDefault(); // this will prevent the reload!

const href = clickedLink.getAttribute('href');
// do something with href - add it to the History, display content etc.
})<i>
</i>
``
Copy linkTweet thisAlerts:
@kiwisauthorOct 09.2021 — @boohoo#1638010

I forgot to come back and post my solution, this is exactly what I ended up going with. After a few hours googling.

Many thanks none the less.
Copy linkTweet thisAlerts:
@boohooOct 09.2021 — Great to hear that :) Do you know why did I attach the click listener to the body instead of doing that for each link separately?
Copy linkTweet thisAlerts:
@kiwisauthorOct 09.2021 — @boohoo#1638015

One bit of code does all links?
Copy linkTweet thisAlerts:
@boohooOct 09.2021 — @kiwis80#1638016 yes, this too. But also to simplify things whenever the content would be replaced. There can be new links rendered and with this simple click listener on the body it will handle the new links automatically!
Copy linkTweet thisAlerts:
@hypereffectsOct 11.2021 — However, if you're asking what is the best way to get dynamic action from the click of a DOM object, then attaching an event using javascript separate from the content of the document is the best way to go. You could do this in a number of ways. A common way is to use a javascript library like jQuery to bind an event:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<a id="link" href="http://example.com/action">link text</a>

<script type="text/javascript">

$('a#link').click(function(){ /* ... action ... */ })
Copy linkTweet thisAlerts:
@boohooOct 11.2021 — @hypereffects#1638094 this has been debunked a long time ago that it's not "the best" way. Modern JS frameworks attach handlers to their markup and it's actually easier to maintain. That being said, in this case it's fine to have it separate, since we're attaching a general behavior. But I did that in my answer before.
×

Success!

Help @kiwis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...