On using Google I found that they are using onclick events in anchor tags.
In more option in google header part, it looks like normal a tag, but onclicking it doesn't get redirected but opened a menu. Normally when using
<a href='more.php' onclick='show_more_menu()'>More >>></a>
It usually goes to 'more.php' without firing show_more_menu(), but I have show a menu in that page itself. How to do like google?
If your onclick function returns false the default browser behaviour is cancelled. As such:
<a href='http://www.google.com' onclick='return check()'>check</a>
<script type='text/javascript'>
function check()
{
return false;
}
</script>
Either way, whether google does it or not isn't of much importance. It's cleaner to bind your onclick functions within javascript - this way you separate your HTML from other code.
You can even try below option:
More >>>
From what I understand you do not want to redirect when the link is clicked.
You can do:
<a href='javascript:;' onclick='show_more_menu();'>More ></a>
Use following code to show menu instead go to href addres
function show_more_menu(e) {
if( !confirm(`Go to ${e.target.href} ?`) ) e.preventDefault();
}
More >>>
One more solution that prevents default action even if the javascript function returns any value.
<a href="www.any-website.com" onclick='functionToRun();return false;'>
1) Link to work
<a href="#" onClick={this.setActiveTab}>
...View Full List
</a>
setActiveTab = (e) => {
e.preventDefault();
console.log(e.target);
}
I have the following html/code that works fine in IE but when I click the link in Chrome, nothing happens.
The HTML is as follows:
<h1 id="pagetitle">Daina - kora dziesmu krājums</h1>
<div class="frontpage">
<p id="arvilcinu">Ar vilciņu Rīga braucu</p>
</div>
<!--***************** Ar Vilcinu *******************-->
<div id="arvilcinudisplay" class="singlesong">
<p>Click here to download PDF file for printing</p>
<p>Click here to watch the video - sung by Daina</p>
<p id="back"><img src="backbutton.jpg" alt="Back to Main menu" height="40" width="100"></p>
</div>
The jquery bit of script is as follows:
$("#arvilcinu").click(function(){
$(".frontpage").fadeOut(1000,function(){
document.getElementById("pagetitle").innerHTML = "Ar vilciņu Rīga braucu";
$("#arvilcinudisplay").css("display","block");
});
});
The idea is that when the user clicks the link (id=arvilcinu) that the link fades out and the relevant info is then displayed. Clicking the link in Chrome just makes the screen flash for a second but nothing on the screen changes.
Thanks
You need to use preventDefault() to remove natural behaviour of link and to fire click event written by you, like below :
Also you can write your code in jQuery only (no javascript) --
$("#arvilcinu").click(function(e){
e.preventDefault();
$(".frontpage").fadeOut(1000,function(){
$("#pagetitle").html("Ar vilciņu Rīga braucu");
$("#arvilcinudisplay").show();
});
});
Working Demo
It is because of the two event will be occur when you click on the link. one is of your anchor tag <a href="" >... and another is of your click event on element whose id is arvilcinu. anchor tag is inside of the <p id="arvilcinu"> which leads to this behaviour.
You need to prevent default behaviour of the <a> tag which will be done by using
event.preventDefault() function on the event.
If this method is called, the default action of the event will not be triggered.
You code should look like below :
$("#arvilcinu").click(function(e){
e.preventDefault();
// rest of you logic on click event
});
I have a test page here: http://www.problemio.com/test.php
and if you press "Click To Test Signup" you get a form. If on that form, you click "Log In" it recognizes that you clicked that, and opens the login form.
But the problem is that on the login form, if you press "create profile" it actually goes to the url of the href tag and not to the jQuery click event.
My quetion is what is the best practice of doing this? I hered of something called "prevent default behavior" but not sure how/when it should be used.
I am guessing that if the user has JS disabled, they should still be able to log in. How can I set it up so that users can log in and make accounts in the jQuery way first, and some default way if they have JS disabled?
Thanks!
You can do this with pure jQuery with
$("#createprofilelink").click(function(event) {
event.preventDefault();
{create profile logic}
});
more details of this can be seen in the jQuery documentation http://api.jquery.com/event.preventDefault/
Edit: I removed this because of #maxedison comment that it stops the jQuery event from firing but I have just tested this and the jQuery event fires but the link does not go to the address.
<a id="thelink" href="http://www.google.com" onclick="return false;">the link</a>
<script>
$('#thelink').click(function(){alert('alert me');});
</script>
As for the JS being disabled part of the question the link really should point to to a real form to fill in, as Taryn East correctly says, so the user gets the same functionality even if the user experience is lower by not using JavaScript.
You could even go down the noscript route
<noscript>
<div>Your user experience would be far improved if you
enable JavaScript but if you insist,
Click Here to create your profile</div>
</noscript>
To fix you link-gazumping problem, indeed, as #kamui says, use return false;
But as to your JS-disabled question - point the href at a real URL -> preferably the same URL as your JS-enabled stuff - or the same form, but in a new window.
I could not follow the link due to firewall restrictions on my side but...
You'll want to use whats called unobtrusive javascript.
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
This means if JS is available it will use it, if not continue working as plain html.
using jQuery you would first attach the click event to your button in the $.Ready() method.
<a id='btnTest' href='login.html' />
$(document).ready(function () {
// Attach click event to btnTest
$("#btnTest").click(function (e) {
// do logic
return false; // Returning false here will stop the link from following login.html.
});
});
Hope this helps.
I'm using the jQuery dialog plugin.
The dialog div is set up (but not opened) on page load:
$(document).ready(function(){
$('#foo').dialog({autoOpen:false});
});
Then a hyperlink is supposed to open the dialog:
Show dialogue box
But this opens the dialog then a fraction later redirects to a page with the URL javascript:$('#foo').dialog('open');!
I have tried returning false:
Show dialogue box
But then the link doesn't respond at all when I click on it.
I know this must be to do with one of JavaScript's infamous subtleties but I can't work it out.
Can anyone help?
Then a hyperlink is supposed to open the dialog:
Show dialogue box
But this opens the dialog then a fraction later redirects to a page with the URL javascript:$('#foo').dialog('open');!
That shouldn't be happening. The pseudo-protocol javascript: doesn't involve a page load, and certainly not one via HTTP. I don't recommend it (I'd use jQuery's click handler instead), but it should work.
I have tried returning false:
...
But then the link doesn't respond at all when I click on it.
That also shouldn't be happening.
Your code as quoted is fine (works here, for instance: http://jsbin.com/inixa5), so the problem must lie in some other part of the page.
Update: Okay, that's weird, IE6 and IE7 didn't like that; I think it's because dialog returns a value. You can get around that either by wrapping up your call to open the dialog in a function and doesn't explicitly return anything:
Click Me
<script>
$("#foo").dialog({autoOpen: false});
function showDialog(selector) {
$(selector).dialog('open');
}
</script>
Or (and this is mega-hacky) by making sure the last expression in the javascript: block is undefined:
Click Me
<script>
$("#foo").dialog({autoOpen: false});
</script>
Or by using onclick:
Click Me
<script>
$("#foo").dialog({autoOpen: false});
</script>
But in any case, strongly recommend hooking things up with a DOM2 style event handler:
<a href="#" name='openSesame'>Click Me</a>
<script>
// This _can_ be immediately after the anchor, but I'd put it in
// a separate, since .js file for the page that you load just before
// the closing body tag.
$("#foo").dialog({autoOpen: false});
$("a[name=openSesame]").click(function() {
$("#foo").dialog('open');
return false;
});
</script>
Live example (Obviously, you can use any selector that makes sense, you don't have to give the anchor a name [or id].)
One of the nice things about this is that you can then have the anchor take the user somewhere meaningful and/or useful if JavaScript is disabled (something called progressive enhancement).
Change the link to:
<a href="javascript:void(0)" onclick="$('#foo').dialog('open')">
Show dialogue box
</a>
Best avoid putting javascript in the href.
Even better would be giving it a class and than adding a click event to it through jquery.
I want to run a simple JavaScript function on a click without any redirection.
Is there any difference or benefit between putting the JavaScript call in the href attribute (like this):
....
vs. putting it in the onclick attribute (binding it to the onclick event)?
bad:
<a id="myLink" href="javascript:MyFunction();">link text</a>
good:
<a id="myLink" href="#" onclick="MyFunction();">link text</a>
better:
<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>
even better 1:
<a id="myLink" title="Click to do something"
href="#" onclick="MyFunction();return false;">link text</a>
even better 2:
<a id="myLink" title="Click to do something"
href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>
Why better? because return false will prevent browser from following the link
best:
Use jQuery or other similar framework to attach onclick handler by element's ID.
$('#myLink').click(function(){ MyFunction(); return false; });
Putting the onclick within the href would offend those who believe strongly in separation of content from behavior/action. The argument is that your html content should remain focused solely on content, not on presentation or behavior.
The typical path these days is to use a javascript library (eg. jquery) and create an event handler using that library. It would look something like:
$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );
In terms of javascript, one difference is that the this keyword in the onclick handler will refer to the DOM element whose onclick attribute it is (in this case the <a> element), whereas this in the href attribute will refer to the window object.
In terms of presentation, if an href attribute is absent from a link (i.e. <a onclick="[...]">) then, by default, browsers will display the text cursor (and not the often-desired pointer cursor) since it is treating the <a> as an anchor, and not a link.
In terms of behavior, when specifying an action by navigation via href, the browser will typically support opening that href in a separate window using either a shortcut or context menu. This is not possible when specifying an action only via onclick.
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 ... */ })
</script>
EDITOR WARNING: See the comments, the use of 'nohref' is incorrect in this answer.
I use
Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>
A long way around but it gets the job done. use an A style to simplify
then it becomes:
<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style>
<a nohref onClick="alert('Hello World')">HERE</a>
The top answer is a very bad practice, one should never ever link to an empty hash as it can create problems down the road.
Best is to bind an event handler to the element as numerous other people have stated, however, do stuff works perfectly in every modern browser, and I use it extensively when rendering templates to avoid having to rebind for each instance. In some cases, this approach offers better performance. YMMV
Another interesting tid-bit....
onclick & href have different behaviors when calling javascript directly.
onclick will pass this context correctly, whereas href won't, or in other words no context won't work, whereas <a onclick="javascript:doStuff(this)">no context</a> will.
Yes, I omitted the href. While that doesn't follow the spec, it will work in all browsers, although, ideally it should include a href="javascript:void(0);" for good measure
the best way to do this is with:
The problem is that this WILL add a hash (#) to the end of the page's URL in the browser, thus requiring the user to click the back button twice to go to the page before yours. Considering this, you need to add some code to stop event propagation. Most javascript toolkits will already have a function for this. For example, the dojo toolkit uses
dojo.stopEvent(event);
to do so.
In addition to all here, the href is shown on browser's status bar, and onclick not. I think it's not user friendly to show javascript code there.
This works
Click Here
Having javascript: in any attribute that isn't specifically for scripting is an outdated method of HTML. While technically it works, you're still assigning javascript properties to a non-script attribute, which isn't good practice. It can even fail on old browsers, or even some modern ones (a googled forum post seemd to indicate that Opera does not like 'javascript:' urls).
A better practice would be the second way, to put your javascript into the onclick attribute, which is ignored if no scripting functionality is available. Place a valid URL in the href field (commonly '#') for fallback for those who do not have javascript.
it worked for me using this line of code:
<a id="LinkTest" title="Any Title" href="#" onclick="Function(); return false; ">text</a>
First, having the url in href is best because it allows users to copy links, open in another tab, etc.
In some cases (e.g. sites with frequent HTML changes) it is not practical to bind links every time there is an update.
Typical Bind Method
Normal link:
<a href="https://www.google.com/">Google<a/>
And something like this for JS:
$("a").click(function (e) {
e.preventDefault();
var href = $(this).attr("href");
window.open(href);
return false;
});
The benefits of this method are clean separation of markup and behavior and doesn't have to repeat the function calls in every link.
No Bind Method
If you don't want to bind every time, however, you can use onclick and pass in the element and event, e.g.:
Google
And this for JS:
function Handler(self, e) {
e.preventDefault();
var href = $(self).attr("href");
window.open(href);
return false;
}
The benefit to this method is that you can load in new links (e.g. via AJAX) whenever you want without having to worry about binding every time.
Personally, I find putting javascript calls in the HREF tag annoying. I usually don't really pay attention to whether or not something is a javascript link or not, and often times want to open things in a new window. When I try doing this with one of these types of links, I get a blank page with nothing on it and javascript in my location bar. However, this is sidestepped a bit by using an onlick.
The most upvoted answer is obsolete today
I would recommend the exact opposite, see step by step with reasons:
good:
<a id="myLink" href="javascript:MyFunction();">link text</a>
It depends, might be good, because crawlers follows href targets and if there is any meaningful content produced by MyFunction() (dynamic link), it is followed more likely than in the click event, which may have multiple or none listeners.
bad:
<a id="myLink" href="#" onclick="MyFunction();">link text</a>
# means meaningless link, crawlers are often interested only in first x links, so it can prevent them to follow some meaningful links later in the page.
worse:
<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>
Same as previous plus return false prevents following the link. If some other scripts want to add another listener and update the target (say to redirect via proxy), they can't without modifying the onclick (okay, it's just a minor setback as such use cases are rather theoretical).
worst:
Use jQuery or other similar framework to attach onclick handler by element's ID.
$('#myLink').click(function(){ MyFunction(); return false; });
jQuery is outdated in 2020+ and should not be used in new projects.
Events in href
The href attribute handler doesn't get the event object, so the handler doesn't implicitly see which link was the source. You can add it in onclick handler, which fires before the href is followed:
<a href="javascript:my_function(event2)" onclick="event2=event">
JS based link
</a>
<script>
function my_function(e) {
console.log(e.target); // the source of the click
if(something) location.href = ...; // dynamic link
}
</script>
One more thing that I noticed when using "href" with javascript:
The script in "href" attribute won't be executed if the time difference between 2 clicks was quite short.
For example, try to run following example and double click (fast!) on each link.
The first link will be executed only once.
The second link will be executed twice.
<script>
function myFunc() {
var s = 0;
for (var i=0; i<100000; i++) {
s+=i;
}
console.log(s);
}
</script>
href
onclick
Reproduced in Chrome (double click) and IE11 (with triple click).
In Chrome if you click fast enough you can make 10 clicks and have only 1 function execution.
Firefox works ok.
<hr>
<h3 class="form-signin-heading"><i class="icon-edit"></i> Register</h3>
<button data-placement="top" id="signin_student" onclick="window.location='signup_student.php'" id="btn_student" name="login" class="btn btn-info" type="submit">Student</button>
<div class="pull-right">
<button data-placement="top" id="signin_teacher" onclick="window.location='guru/signup_teacher.php'" name="login" class="btn btn-info" type="submit">Teacher</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#signin_student').tooltip('show'); $('#signin_student').tooltip('hide');
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#signin_teacher').tooltip('show'); $('#signin_teacher').tooltip('hide');
});
</script>
I experienced that the javascript: hrefs did not work when the page was embedded in Outlook's webpage feature where a mail folder is set to instead show an url
click here
I cant belive that +13 years later, all of these answers are semantically incorrect! An anchor element <a>:
...with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
Content within each should indicate the link's destination. If the href attribute is present, pressing the enter key while focused on the element will activate it.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
Therefore, using an href= for javascript is bad practice and poor web semantics. You should rather be using an onclick= event handler attribute on a button element, as:
The HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs a programmable action, such as submitting a form or opening a dialog.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
and the event handler onclick=:
All event handler attributes accept a string. The string will be used to synthesize a JavaScript function like function name(/args/) {body}, where name is the attribute's name, and body is the attribute's value.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#event_handler_attributes
As you are not navigating to a URL or a Link destination, but rather triggering a Javascript function the correct way to do this is to use onclick. And if you need the style of an anchor tag on a button, just use CSS.
The bottom line is: just because you can do it doesn't mean you should.
This works as well
<a (click)='myFunc()'>Click Here </a>
(onclick) did not work for me in an Angular project with bootstrap.