Different methods to make a null link?

Different methods to make a null link? - javascript

Is there a way to make a null link besides these methods?
Example
Example
Example
I don't mind something that makes the page jump to the top but I don't want it to alter the URL in the address bar. The ideal link would be one as similar as possible to the ones featured on navigation boxes on Wikipedia but there is much more to that link than meets the eye as it has a pretty large script associated with it. I'm just looking for something to put into the a tag.
Thanks in advance.

You just want something you can shove in the <a> tag? OK:
Example
Combine it with any of the href= methods from your question.
Given that a link that doesn't go anywhere is fairly useless, can I assume you want to kick off some JavaScript function when the link is clicked? If so, do this:
Example

The # method is the simplest, and is always compatible. Using a href=# however, will jump to the top of the page. To prevent the jump, simply reference an unnamed anchor. Like this:
<a href=#nothing >This link has a null href!</a>
<a href=#doesnotexist >This link has a null href!</a>
<a href=#null >This link has a null href!</a>
<a href=#void >This link has a null href!</a>
<a href=#whatever >This link has a null href!</a>

No, all the potentially valid alternatives are not done IMO. I made the following experiments with Chrome and Firefox, managing to identify 2 extra alternatives to the ones already suggested in the question and the answers.
The ones that failed (NOT null links):
This one is not rendered as a link at all, and isn't clickable either.
<a>null-link-1</a>
The next alternative when clicked, moved to document start - not a null link.
null-link-2
The next alternative when clicked, navigates away from document - not a null link.
null-link-3
The next alternative when clicked, when clicked, moves to document start - not a null link.
null-link-4
Now, here are the ones that worked : True Null Links:
Both of the alternatives below, when clicked, do strictly nothing - null links? YES.
null-link-5
This other one is almost the same as the above, but is offered as a true alternative, mostly for its brevity.
null-link-6
NOTE: One of the key differences between my working solutions and those of nnnnnn, is my preference of a blank href, otherwise, they work on the very same principle.

Wikipedia uses the third option. To use that, you can use this HTML:
link
And then attach an event handler with JavaScript:
// I assume `link` is set the element shown above.
link.addEventListener('click', function(e) {
alert("You clicked me!");
e.preventDefault();
e.stopPropagation();
return false;
}, false);
addEventListener should work in most modern browsers, but to be more compatible and more concise, you may wish to use a JavaScript library like jQuery:
$("a").click(function() {
alert("You clicked me!");
return false;
});

Different methods to make a null link.
Example link
OR
Example link

I think you could do well by leaving the href empty altogether, this will show the link to current page :
<a href="" >Example</a>

Related

How to avoid anchor links from jumping/scrolling [duplicate]

When I have a link that is wired-up with a jQuery or JavaScript event such as:
My Link
How do I prevent the page from scrolling to the top? When I remove the href attribute from the anchor the page doesn't scroll to the top but the link doesn't appear to be click-able.

You need to prevent the default action for the click event (i.e. navigating to the link target) from occurring.
There are two ways to do this.
Option 1: event.preventDefault()
Call the .preventDefault() method of the event object passed to your handler. If you're using jQuery to bind your handlers, that event will be an instance of jQuery.Event and it will be the jQuery version of .preventDefault(). If you're using addEventListener to bind your handlers, it will be an Event and the raw DOM version of .preventDefault(). Either way will do what you need.
Examples:
$('#ma_link').click(function($e) {
$e.preventDefault();
doSomething();
});
document.getElementById('#ma_link').addEventListener('click', function (e) {
e.preventDefault();
doSomething();
})
Option 2: return false;
In jQuery:
Returning false from an event handler will automatically call event.stopPropagation() and event.preventDefault()
So, with jQuery, you can alternatively use this approach to prevent the default link behaviour:
$('#ma_link').click(function(e) {
doSomething();
return false;
});
If you're using raw DOM events, this will also work on modern browsers, since the HTML 5 spec dictates this behaviour. However, older versions of the spec did not, so if you need maximum compatibility with older browsers, you should call .preventDefault() explicitly. See event.preventDefault() vs. return false (no jQuery) for the spec detail.

You can set your href to #! instead of #
For example,
Link
will not do any scrolling when clicked.
Beware! This will still add an entry to the browser's history when clicked, meaning that after clicking your link, the user's back button will not take them to the page they were previously on. For this reason, it's probably better to use the .preventDefault() approach, or to use both in combination.
Here is a Fiddle illustrating this (just scrunch your browser down until your get a scrollbar):
http://jsfiddle.net/9dEG7/
For the spec nerds - why this works:
This behaviour is specified in the HTML5 spec under the Navigating to a fragment identifier section. The reason that a link with a href of "#" causes the document to scroll to the top is that this behaviour is explicitly specified as the way to handle an empty fragment identifier:
2. If fragid is the empty string, then the indicated part of the document is the top of the document
Using a href of "#!" instead works simply because it avoids this rule. There's nothing magic about the exclamation mark - it just makes a convenient fragment identifier because it's noticeably different to a typical fragid and unlikely to ever match the id or name of an element on your page. Indeed, we could put almost anything after the hash; the only fragids that won't suffice are the empty string, the word 'top', or strings that match name or id attributes of elements on the page.
More exactly, we just need a fragment identifier that will cause us to fall through to step 8 in the following algorithm for determining the indicated part of the document from the fragid:
Apply the URL parser algorithm to the URL, and let fragid be the fragment component of the resulting parsed URL.
If fragid is the empty string, then the indicated part of the document is the top of the document; stop the algorithm here.
Let fragid bytes be the result of percent-decoding fragid.
Let decoded fragid be the result of applying the UTF-8 decoder algorithm to fragid bytes. If the UTF-8 decoder emits a decoder error, abort the decoder and instead jump to the step labeled no decoded fragid.
If there is an element in the DOM that has an ID exactly equal to decoded fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.
No decoded fragid: If there is an a element in the DOM that has a name attribute whose value is exactly equal to fragid (not decoded fragid), then the first such element in tree order is the indicated part of the document; stop the algorithm here.
If fragid is an ASCII case-insensitive match for the string top, then the indicated part of the document is the top of the document; stop the algorithm here.
Otherwise, there is no indicated part of the document.
As long as we hit step 8 and there is no indicated part of the document, the following rule comes into play:
If there is no indicated part ... then the user agent must do nothing.
which is why the browser doesn't scroll.

An easy approach is to leverage this code:
Link Title
This approach doesn't force a page refresh, so the scrollbar stays in place. Also, it allows you to programmatically change the onclick event and handle client side event binding using jQuery.
For these reasons, the above solution is better than:
Link Title
Link Title
where the last solution will avoid the scroll-jump issue if and only if the myClickHandler method doesn't fail.

You should change the
My Link
to
My Link
This way when the link is clicked the page won't scroll to top. This is cleaner than using href="#" and then preventing the default event from running.
I have good reasons for this on the first answer to this question, like the return false; will not execute if the called function throws an error, or you may add the return false; to a doSomething() function and then forget to use return doSomething();

Returning false from the code you're calling will work and in a number of circumstances is the preferred method but you can also so this
Link Title
When it comes to SEO it really depends on what your link is going to be used for. If you are going to actually use it to link to some other content then I would agree ideally you would want something meaningful here but if you are using the link for functionality purposes maybe like Stack Overflow does for the post toolbar (bold, italic, hyperlink, etc) then it probably doesn't matter.

Try this:
My Link

If you can simply change the href value, you should use:
Link Title
Another neat solution I just came up with is to use jQuery to stop the click action from occurring and causing the page to scroll, but only for href="#" links.
<script type="text/javascript">
/* Stop page jumping when links are pressed */
$('a[href="#"]').live("click", function(e) {
return false; // prevent default click action from happening!
e.preventDefault(); // same thing as above
});
</script>

Link to something more sensible than the top of the page in the first place. Then cancel the default event.
See rule 2 of pragmatic progressive enhancement.

Also, you can use event.preventDefault inside onclick attribute.
doSmth
No need to write exstra click event.

For Bootstrap 3 for collapse, if you don't specify data-target on the anchor and rely on href to determine the target, the event will be prevented. If you use data-target you'll need to prevent the event yourself.
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo">Collapse This</button>
<div id="demo" class="collapse">
<p>Lorem ipsum dolor sit amet</p>
</div>

event.preventDefault() will stop the scrolling but also not change the link state to visited (color), which I need.
The "3 years late" solution is not too late and eliminates unforseen side-effects.
The hrefs I create are in a loop (indexed by "i") "#i!", where i is the index to an array containing the text for the anchor tag.
Works like a charm. (Just #i would work too, except I have other ids set to i).
While I'd like to use the `href='javascript:function()'` approach, this adds 11 bytes (javascript:) plus the bytes of the function name plus parameters to the page size. Mutiply this by 1000+ hrefs and thats 16kb+ added to the page size. (Yes, pagination would help but not for the user). So maybe in a different situation I'd go with the javascript: solution.

You can simply write like this also:-
Delete User

When calling the function, follow it by return false
example:
<input type="submit" value="Add" onclick="addNewPayment();return false;">

Create a page which contains two links- one at the top and one at the bottom. On clicking the top link, the page has to scroll down to the bottom of the page where bottom link is present. On clicking the bottom link, the page has to scroll up to the top of the page.

<a onclick="yourfunction()">
this will work fine . no need to add href="#"

You might want to check your CSS. In the example here: https://css-tricks.com/the-checkbox-hack/ there's position: absolute; top: -9999px;. This is particularly goofy on Chrome, as onclick="whatever" still jumps to the absolute position of the clicked element.
Removing position: absolute; top: -9999px;, for display: none; might help.

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).

What does href expression do?

I have seen the following href used in webpages from time to time. However, I don't understand what this is trying to do or the technique. Can someone elaborate please?

An <a> element is invalid HTML unless it has either an href or name attribute.
If you want it to render correctly as a link (ie underlined, hand pointer, etc), then it will only do so if it has a href attribute.
Code like this is therefore sometimes used as a way of making a link, but without having to provide an actual URL in the href attribute. The developer obviously wanted the link itself not to do anything, and this was the easiest way he knew.
He probably has some javascript event code elsewhere which is triggered when the link is clicked, and that will be what he wants to actually happen, but he wants it to look like a normal <a> tag link.
Some developers use href='#' for the same purpose, but this causes the browser to jump to the top of the page, which may not be wanted. And he couldn't simply leave the href blank, because href='' is a link back to the current page (ie it causes a page refresh).
There are ways around these things. Using an empty bit of Javascript code in the href is one of them, and although it isn't the best solution, it does work.

basically instead of using the link to move pages (or anchors), using this method launches a javascript function(s)
<script>
function doSomething() {
alert("hello")
}
</script>
click me
clicking the link will fire the alert.

There are several mechanisms to avoid a link to reach its destination. The one from the question is not much intuitive.
A cleaner option is to use href="#no" where #no is a non-defined anchor in the document.
You can use a more semantic name such as #disable, or #action to increase readability.
Benefits of the approach:
Avoids the "moving to the top" effect of the empty href="#"
Avoids the use of javascript
Drawbacks:
You must be sure the anchor name is not used in the document.
The URL changes to include the (non-existing) anchor as fragment and a new browser history entry is created. This means that clicking the "back" button after clicking the link won't behave as expected.
Since the <a> element is not acting as a link, the best option in these cases is not using an <a> element but a <div> and provide the desired link-like style.

is just shorthand for:

It's used to write js codes inside of href instead of event listeners like onclick and avoiding # links in href to make a tags valid for HTML.
Interesting fact
I had a research on how to use javascript: inside of href attribute and got the result that I can write multiple lines in it!
<a href="
javascript:
a = 4;
console.log(a++);
a += 2;
console.log(a++);
if(a < 6){
console.log('a is lower than 6');
}
else
console.log('a is greater than 6');
function log(s){
console.log(s);
}
log('function implementation working too');
">Click here</a>
Tested in chrome Version 68.0.3440.106 (Official Build) (64-bit)
Tested in Firefox Quantum 61.0.1 (64-bit)

It is a way of making a link do absolutely nothing when clicked (unless Javascript events are bound to it).
It is a way of running Javascript instead of following a link:
link
When there isn't actually javascript to run (like your example) it does nothing.

Refer to this:
Link to the website opened in different tab
Link to the div in the page(look at the chaneged url)
Nothing happens if there is no javaScript to render

javascript: tells the browser going to write javascript code

Old thread but thought I'd just add that the reason developers use this construct is not to create a dead link, but because javascript URLs for some reason do not pass references to the active html element correctly.
e.g. handler_function(this.id) works as onClick but not as a javascript URL.
Thus it's a choice between writing pedantically standards-compliant code that involves you in having to manually adjust the call for each hyperlink, or slightly non-standard code which can be written once and used everywhere.

Since it is a styling issue, instead of polluting the HTML with non valid syntax, you could/should use a W3 valid workaround:
Format the HTML properly, without href, following the W3 accessibility guide lines for buttons.
Use CSS to fix the initial goal of applying a clickable UX effect on a control.
Here's a live example for you to try the UX.
HTML
<a role="button" aria-pressed="false">Underlined + Pointer</a>
<a role="button" aria-pressed="false" class="btn">Pointer</a>
CSS
a[role="button"]:not([href]):not(.btn) { text-decoration: underline; }
a[role="button"]:not([href]) { cursor: pointer; }

I was searching for a solution that does not refresh pages but opens menu items on Ipads and phones.
I tried it on also mobile, It works well
Dr

1. Use that java script to Clear an HTML row Or Delete a row using the id set to a span and use JQuery to set a function to that span's click event.
2. Dynamically set the div html to a string variable and replace {id} with a 1 or 2 etc. cell of a larger div table and rows
<div class="table-cell">
<span id="clearRow{id}">
Clear
</span>
</div>
<div class="table-cell">
<span id="deleteRow{id}">
Delete
</span>
</div>
//JQuery - Clear row
$("#clearRow" + idNum).click(function(){
$("someIDOrWildcardSelector" + idNum).val("");
$("someIDOrWildcardSelector" + idNum).val("");
$("someIDOrWildcardSelector" + idNum).val("");
});
//JQuery to remove / delete an html row
$("#deleteRow" + idNum).click(function(){
//depending upon levels of parent / child use 1 to many .parent().parent().parent()
$(this).parent().remove();
});

A href pointed to nowhere added # to url

I have a href which pointed to #
<a href="#" id="bla" >Bla<a>
I have onclick function which displaying popup on click on that a href.
function doingClick()
{
//display popup
return false;
}
But after click symbol # every time added to the url in browser.
So for example if url was like that before I click on my link http://mywebsite.com
But after click on a href the url looking like that: http://mywebsite.com#
Is there any way to avoid such behavior?

To avoid this try adding return false;
Link
You could also use void(0)
Link
There's a popular question related to this (small religious war!) at Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

Link
Do not forget to return the return of your function. Otherwise you will just call it without suspending the subsequent events.

While there are other valid solutions, I personally prefer this shorter solution.
Link
Another benefit is that this solution does not scroll to the top of the window.

So i think the better way of doing this is to remove href from a element
<a id="bla" class="href" >Bla</a>
and than to make it looks like a href just add simple css class
.href
{
color: #2289b8; //color of the link
cursor: pointer;
}
This idea comes to me when i looked in to source of SO add comment button

Instead of adding a href, you could add a style="cursor:pointer;"
this has the same effect of displaying it like a hyperlink, without the in-page anchor effect.
<a id="bla" onclick="return doingClick()" style="cursor:pointer;">Link</a>

The url is not pointed to nowhere. The URL is a relative URL to # in other words the URL resolves to <current_url># which in this case is http://mywebsite.com#.
To avoid this behaviour, you have to change the URL.
If you have a onclick-handler that returns false, then that should prevent the link being active :
link
You can also use javascript:void(0) as the link href.
In either case, be mindful of the decreased accessibility of your site when you use javascript to access some parts of it. Those users that have javascript disabled, doesn't have javascript enabled browsers or use a screenreader or other accessibilty tools may not be able to use the site.

If you don't get better answer, you could make nasty ugly workaround by placing script tag very early on page (on the beginning of body or in head) with following javascript:
if(document.location.href[document.location.href.length-1]=='#'){
document.location.href = document.location.href.substring(0, document.location.href.length-2)
}
I DO NOT RECOMMEND you to do this as will cause double requests to server when # is in url, but it is here if you have to.

The # is used for linking the element ID's, and will always be added to your URL when used in "empty" hrefs. What you could do, if it REALLY annoys you, is to remove it from location.href in your doingClick function

A simple workaround would be set the href empty:
<a href="" id="bla" onClick="alert('Hi');">Bla<a>
Which still works.

If you want to keep the "events" that happens in href="#"
You can simply leave it empty: href=""

How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?

When I have a link that is wired-up with a jQuery or JavaScript event such as:
My Link
How do I prevent the page from scrolling to the top? When I remove the href attribute from the anchor the page doesn't scroll to the top but the link doesn't appear to be click-able.

You need to prevent the default action for the click event (i.e. navigating to the link target) from occurring.
There are two ways to do this.
Option 1: event.preventDefault()
Call the .preventDefault() method of the event object passed to your handler. If you're using jQuery to bind your handlers, that event will be an instance of jQuery.Event and it will be the jQuery version of .preventDefault(). If you're using addEventListener to bind your handlers, it will be an Event and the raw DOM version of .preventDefault(). Either way will do what you need.
Examples:
$('#ma_link').click(function($e) {
$e.preventDefault();
doSomething();
});
document.getElementById('#ma_link').addEventListener('click', function (e) {
e.preventDefault();
doSomething();
})
Option 2: return false;
In jQuery:
Returning false from an event handler will automatically call event.stopPropagation() and event.preventDefault()
So, with jQuery, you can alternatively use this approach to prevent the default link behaviour:
$('#ma_link').click(function(e) {
doSomething();
return false;
});
If you're using raw DOM events, this will also work on modern browsers, since the HTML 5 spec dictates this behaviour. However, older versions of the spec did not, so if you need maximum compatibility with older browsers, you should call .preventDefault() explicitly. See event.preventDefault() vs. return false (no jQuery) for the spec detail.

An easy approach is to leverage this code:
Link Title
This approach doesn't force a page refresh, so the scrollbar stays in place. Also, it allows you to programmatically change the onclick event and handle client side event binding using jQuery.
For these reasons, the above solution is better than:
Link Title
Link Title
where the last solution will avoid the scroll-jump issue if and only if the myClickHandler method doesn't fail.

You should change the
My Link
to
My Link
This way when the link is clicked the page won't scroll to top. This is cleaner than using href="#" and then preventing the default event from running.
I have good reasons for this on the first answer to this question, like the return false; will not execute if the called function throws an error, or you may add the return false; to a doSomething() function and then forget to use return doSomething();

Returning false from the code you're calling will work and in a number of circumstances is the preferred method but you can also so this
Link Title
When it comes to SEO it really depends on what your link is going to be used for. If you are going to actually use it to link to some other content then I would agree ideally you would want something meaningful here but if you are using the link for functionality purposes maybe like Stack Overflow does for the post toolbar (bold, italic, hyperlink, etc) then it probably doesn't matter.

Try this:
My Link

If you can simply change the href value, you should use:
Link Title
Another neat solution I just came up with is to use jQuery to stop the click action from occurring and causing the page to scroll, but only for href="#" links.
<script type="text/javascript">
/* Stop page jumping when links are pressed */
$('a[href="#"]').live("click", function(e) {
return false; // prevent default click action from happening!
e.preventDefault(); // same thing as above
});
</script>

Link to something more sensible than the top of the page in the first place. Then cancel the default event.
See rule 2 of pragmatic progressive enhancement.

Also, you can use event.preventDefault inside onclick attribute.
doSmth
No need to write exstra click event.

For Bootstrap 3 for collapse, if you don't specify data-target on the anchor and rely on href to determine the target, the event will be prevented. If you use data-target you'll need to prevent the event yourself.
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo">Collapse This</button>
<div id="demo" class="collapse">
<p>Lorem ipsum dolor sit amet</p>
</div>

event.preventDefault() will stop the scrolling but also not change the link state to visited (color), which I need.
The "3 years late" solution is not too late and eliminates unforseen side-effects.
The hrefs I create are in a loop (indexed by "i") "#i!", where i is the index to an array containing the text for the anchor tag.
Works like a charm. (Just #i would work too, except I have other ids set to i).
While I'd like to use the `href='javascript:function()'` approach, this adds 11 bytes (javascript:) plus the bytes of the function name plus parameters to the page size. Mutiply this by 1000+ hrefs and thats 16kb+ added to the page size. (Yes, pagination would help but not for the user). So maybe in a different situation I'd go with the javascript: solution.

You can simply write like this also:-
Delete User

When calling the function, follow it by return false
example:
<input type="submit" value="Add" onclick="addNewPayment();return false;">

Create a page which contains two links- one at the top and one at the bottom. On clicking the top link, the page has to scroll down to the bottom of the page where bottom link is present. On clicking the bottom link, the page has to scroll up to the top of the page.

<a onclick="yourfunction()">
this will work fine . no need to add href="#"

You might want to check your CSS. In the example here: https://css-tricks.com/the-checkbox-hack/ there's position: absolute; top: -9999px;. This is particularly goofy on Chrome, as onclick="whatever" still jumps to the absolute position of the clicked element.
Removing position: absolute; top: -9999px;, for display: none; might help.

We Keep Coding

JavaScript is the programming language of the Web.