javascript tutorial - [Solved-5 Solutions] “#” or “javascript:void(0)” - javascript - java script - javascript array
Problem:
Which “href” value should we use for javascript liks, “#” or “javascript:void(0)” ?
function myJsFunc() {
alert("myJsFunc");
}
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>click below button to copy the code. By JavaScript tutorial team
Solution 1:
The following are two methods of building a link that has the sole purpose of running JavaScript code. Which is better, in terms of functionality, page load speed, validation purposes, etc.?
function myJsFunc() {
alert("myJsFunc");
}
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>click below button to copy the code. By JavaScript tutorial team
Solution 2:
- If we can have an actual URL that makes sense use that as the HREF. The onclick won't fire if someone middle-clicks on your link to open a new tab or if they have JavaScript disabled.
- If that is not possible, then we should at least inject the anchor tag into the document with JavaScript and the appropriate click event handlers.
- WE realize this isn't always possible, but in my opinion it should be striven for in developing any public website.
- Check out Unobtrusive JavaScript and Progressive enhancement (both Wikipedia).
Solution 3:
- The unobtrusive JavaScript way
- Just don't have a
hrefattribute at all! Any good CSS reset would take care of the missing default cursor style, so that is a non-issue. Then attach your JavaScript functionality using graceful and unobtrusive best practices - which are more maintainable as your JavaScript logic stays in JavaScript, instead of in your markup - which is essential when we start developing large scale JavaScript applications which require your logic to be split up into black boxed components and templates. More on this in Large-scale JavaScript Application Architecture - Simple code example
// Cancel click event
$('.cancel-action').click(function(){
alert('Cancel action occurs!');
});
// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
$(this).toggleClass('hover');
});
a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>
click below button to copy the code. By JavaScript tutorial team
Solution 4:
WE would honestly suggest neither. WE would use a stylized for that behavior.
button.link {
display:inline-block;
position:relative;
background-color: transparent;
cursor: pointer;
border:0;
padding:0;
color:#00f;
text-decoration:underline;
}click below button to copy the code. By JavaScript tutorial team
This way we can assign your onclick. We also suggest binding via script, not using the onclickattribute on the element tag. The only gotcha is the pseudo 3d text effect in older IEs that cannot be disabled.
If we MUST use an A element, use javascript:void(0); for reasons already mentioned.
- Will always intercept in case your onclick event fails.
- Will not have errant load calls happen, or trigger other events based on a hash change
- The hash tag can cause unexpected behavior if the click falls through (onclick throws), avoid it unless it's an appropriate fall-through behavior, and we want to change the navigation history.
NOTE: We can replace the 0 with a string such as javascript:void('Delete record 123') which can serve as an extra indicator that will show what the click will actually do.
Solution 5:
The first one, ideally with a real link to follow in case the user has JavaScript disabled. Just make sure to return false to prevent the click event from firing if the JavaScript executes.
<a href="#" onclick="myJsFunc(); return false;">Link</a>