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 title attribute [binding it to the title event]?
saw
3262 gold badges4 silver badges12 bronze badges
asked Jul 1, 2009 at 18:59
SkunkSpinnerSkunkSpinner
11.2k7 gold badges40 silver badges52 bronze badges
2
bad:
link textgood:
link textbetter:
link texteven better 1:
link texteven better 2:
link textWhy better? because return false will prevent browser from following the link
best:
Use jQuery or other similar framework to attach title handler by element's ID.
$['#myLink'].click[function[]{ MyFunction[]; return false; }];
Gray
113k22 gold badges283 silver badges349 bronze badges
answered Jul 5, 2012 at 16:13
25
Putting the title 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; } ];
wilbbe01
1,9211 gold badge23 silver badges38 bronze badges
answered Jul 1, 2009 at 19:05
ParandParand
99.6k45 gold badges151 silver badges184 bronze badges
8
In terms of javascript, one difference is that the this keyword in the title handler will refer to the DOM element whose title attribute it is [in this case the link text $['a#link'].click[function[]{ /* ... action ... */ }]
answered Jul 1, 2009 at 19:54
AdamAdam
1,7241 gold badge14 silver badges33 bronze badges
1
EDITOR WARNING: See the comments, the use of 'nohref' is incorrect in this answer.
I use
Click 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. YMMVAnother interesting tid-bit....
title & href have different behaviors when calling javascript directly.
title will pass this context correctly, whereas href won't, or in other words no context won't work, whereas
answered Mar 11, 2017 at 8:01
slothstronautslothstronaut
8121 gold badge12 silver badges14 bronze badges
1
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.
answered Jul 2, 2009 at 2:29
linusthe3rdlinusthe3rd
3,3353 gold badges27 silver badges42 bronze badges
3
In addition to all here, the href is shown on browser's status bar, and title not. I think it's not user friendly to show javascript code there.
answered Jul 1, 2009 at 19:09
KamareyKamarey
10.6k7 gold badges56 silver badges69 bronze badges
This works
Click Hereanswered Feb 8, 2018 at 8:19
text
answered Dec 10, 2014 at 15:14
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 title and pass in the element and event, e.g.:
GoogleAnd this for JS:
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.
answered Mar 2, 2019 at 21:05
jchavannesjchavannes
2,2001 gold badge24 silver badges13 bronze badges
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.
answered Jul 1, 2009 at 19:08
PeterPeter
4212 silver badges8 bronze badges
The most upvoted answer is obsolete today
I would recommend the exact opposite, see step by step with reasons:
good:
link textIt 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:
link text# 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:
link textSame 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 title [okay, it's just a minor setback as such use cases are rather theoretical].
worst:
Use jQuery or other similar framework to attach title 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 title handler, which fires before the href is followed:
JS based link function my_function[e] { console.log[e.target]; // the source of the click if[something] location.href = ...; // dynamic link }answered Nov 23, 2021 at 8:58
Jan TuroňJan Turoň
29.7k21 gold badges117 silver badges163 bronze badges
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.
function myFunc[] { var s = 0; for [var i=0; i