Which call faster href vs onclick - javascript

Hi~ i want to calling sequence about anchor tag href property and onclick proerty I have some test
asdfasdf
and click anchor tag. is result show alert and link stackoverflow but
<a onclick="setTimeout(function(){console.log('asdf')})" href="https://stackoverflow.com" >test</a>
this tag first call href proerty! Please explain calling
sequence href and onclick
and if you know another knowledge explain for me Please ToT

So onclick functions actually run before href. This allows you to do a number of really cool things, like stop the link from executing if you want to like so:
function stopLink(event) {
event.preventDefault();
}
click me

Related

What does href=javascript:{} do?

What is the reason for using javascript:{} in the code below. Is it similar to href="javascript:" or href="javascript:void(0)"?
This is an example
Let hyperlink look like a link but didn't link anything.
This is an example
if you remove href attribute, that a tag will be normal text.
It makes a button act like a link, but lets you execute custom JS code instead of linking to a webpage.
For example:
Press me pls
acts like
<div onclick="doOnClick()"> Press me pls </a>
<script>
function doOnClick(){ document.write('hi u just pressed me'); }
</script>
but the browser treats the former like a link.

javascript resets the css value after a href onclick

this is the html line where i call the function:
Oranges
and this is the javascript:
function showMe (whichClass) {
var fruitShow = document.getElementsByClassName('fruit')[whichClass];
fruitShow.style.display = 'inline';
}
it works when i click the link and displays the fruit but it disappears. When the site loads the fruits are all set to display: none, i'm not sure if its reverting back or something else is going on. I have also tried using return before the function call (return showMe(1);)
Clicking the link triggers a reload of the page. Passing an empty value to href is equivalent to using the URL of the current page.
There are a couple of ways to prevent the page from following the link:
Change the href value to "#". This will make the page jump scroll to the top though, so you probably have to do the next option either way.
Stop the default behavior via event.preventDefault(). The default behavior is to load the URL. You can prevent that via the event object:
onclick="event.preventDefault();showMe(0)";
(note: while this works, there are better ways to bind event handlers)
Better yet: Don't use a link (since you don't link to anything), use a <button> instead. You can style it anyway you like with CSS.
Try changing your anchor href from "" to #.
replace
Oranges
with
Oranges
Or this
Oranges
change to this (prevent jumping)
Oranges
Just to have a tip more, but as already pointed out, using a button on this situation is a better solution.

<a class="link" href="javascript:;">edit</a>

I am seeing this code in a PHP smarty template file *.tpl:
<span id="crmspanid" style="display:none;position:absolute;" onmouseover="show('crmspanid');">
<a class="link" href="javascript:;">{$APP.EDIT_BUTTON}</a>
</span>
$APP.EDIT_BUTTON is essentially an english workd Edit, hence the above line translates to:
<a class="link" href="javascript:;">Edit</a>
I'd think <a class="link" href="javascript:;">Edit</a> makes "Edit" appear as a link but does nothing when clicking on it.
The show function is like this:
function show(divId)
{
if(getObj(divId))
{
var id = document.getElementById(divId);
id.style.display = 'inline';
}
}
However in this page, if Edit is clicked, the page gets 'expanded' a bit, and a text box together with a couple of buttons are shown: (this is the text box and a Save button and Cancel link that appear after clicking on the Edit).
I am lost as to how to find where the code is which gets gone through after Edit is clicked. Any thoughts are welcomed! many thanks.
Someone attached an onclick handler to the link which contains the actual code that is executed. The href attribute seems to be just a dummy.
The click event handler is probably added with JavaScript code that runs on page load. Look through your JavaScript for the code that runs on page load, then you should be able to find the code that adds the click event handler.
It's not good practice to add event handlers in the HTML. This is something you should be doing in JavaScript. It's also bad practice to use href="javascript:" - links should have real destinations for reliability and accessibility reasons.

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

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:
Click Here!
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:
Link
Link
Link
Thanks again, everyone.
--- End Edit ---
If you use return false at the end of your onclick attribute it will not make it scroll anywhere.
Click Here!
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>
Click Here!
Set the javascript function to the href.
Click Here!
Edit: Just to note some consider this bad practice.
Set the href to javascript:void(0);, this will mean the browser displays the link as if it had a real href:
Click Here!
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).

Page jumps to the top onclick [duplicate]

This question already has answers here:
Prevent href="#" link from changing the URL hash
(11 answers)
Closed 8 years ago.
I have a click in the middle of a website with code like <a href=“#“ onclick=“…
The function works well, but the a href=“#“ let’s the page always jump to the top when I click on the link. Is there any way around it?
Thanks
Just add ; return false; to the end of your onclick, for example:
<a href="#" onclick="alert('hello'); return false;">
Edit: Hemlock's answer is a good alternative, but yet another one is a combination of the two:
<a href="javascript:void(0)" onclick="alert('hello')">
The advantage of this is that you're explicitly saying that the <a> should do nothing with the href, and the onclick event handler is a separate attribute. If you later decide to attach the onclick handler using JavaScript rather than inlining it (recommended), it's simply a matter of removing the onclick attribute.
Alternate method
Put the javascript in the href and make sure the code ends in a call to void
add
return false;
at the end of the onclick statement
that is
Click Here
if you want an element that does some javascript onclick, you should not use the a tag. The a tag is for navigation from one page to another. You should use span and then you don't have to provide a href attribute. The problem lies in the fact that you chose the wrong HTML element for your case.
<span onclick=""></span>

Categories