How to get a link that do nothing

Question

I have created a search engine using Angular and Bootstrap. I have created different results tab as shown in image Tabs . Right clicking on tab does not show the option of a link as we get on any link. link on right click Currently I am using <li> tag and bootstrap to create the tabs of different result section. Here is the code for that

<ul type="none" id="search-options">
        <li [class.active_view]="Display('all')" (click)="docClick()">All</li>
        <li [class.active_view]="Display('images')" (click)="imageClick()">Images</li>
        <li [class.active_view]="Display('videos')" (click)="videoClick()">Videos</li>
        <li [class.active_view]="Display('news')" (click)="newsClick()">News</li>
        <li class="dropdown">
          <a href="#" id="settings" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Settings
          </a>
          <ul class="dropdown-menu" aria-labelledby="settings" id="setting-dropdown">
            <li routerLink="/preferences">Search settings</li>
            <li data-toggle="modal" data-target="#customization">Customization</li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" id="tools" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Tools
          </a>
          <ul class="dropdown-menu" aria-labelledby="tools" id="tool-dropdown">
            <li (click)="filterByContext()">Context Ranking</li>
            <li (click)="filterByDate()">Sort by Date</li>
            <li data-toggle="modal" data-target="#myModal">Advanced Search</li>
          </ul>
        </li>
      </ul>

After clicking on the link everything is handled by the functions which get executed on click event. All I want to do that is make that a link, so that user can open it in new tab and state of the app should not change at all. How that is possible? I have tried to do that using routing but things became more complicated. i also followed some answers from here Make a HTML link that does nothing (literally nothing) but they do not work. Please help. I have tried all the answers from there opening link in new tab just disturbs the state of URL.

No I have tried all the answers from there. I want to get a effect like Google. Go to Google, Search for a query and right click on image section and open it in new tab it opens the image section as if it is opened in same tab. — Sachin Singh, Jun 23 '18 at 20:18
Like @hev1 said, a link that doesn't go anywhere can be achieved by using Link text. The question is... why do you want this to be an element? What are you expecting that element to do if it's not link to something? Why not use a simple for example? — Victoria Ruiz, Jun 23 '18 at 20:21
I think you need to edit your question then, that is not a link that does nothing. — Jake, Jun 23 '18 at 20:21
I want to get it opened in a new tab. But currently right clicking on it does not give any option to open it in new tab. After using tag I was getting that option but opening in new tab disturbs the URL. — Sachin Singh, Jun 23 '18 at 20:25
@Jake please edit my question, the way you want. Actually I thought this question will help. — Sachin Singh, Jun 23 '18 at 20:27
Only you know what you truly want out of this question, and it's a good question! Please, just try to word it very plain, simple, and include all of your code that is involved with this problem. I'm sure it will be a helpful question, but it needs some work. — Jake, Jun 23 '18 at 20:56

Unmitigated · Answer 1 · 2019-02-25T02:36:33.690

6

Using <a href="#"></a> will make the page scroll to the top.

Use javascript:void(0):

<a href="javascript:void(0)">Clicking here does nothing</a>

Or equivalently, use javascript:;:

<a href="javascript:;">Clicking here does nothing</a>

Or, with HTML5, just omit the href attribute:

<a>Clicking here does nothing</a>

You can use event.preventDefault() to prevent the default action of the link from being taken.

<a href="http://www.google.com">Valid Link</a><br>
<button id='hitMe'>Disable link</button>
<br/>
<button id="enable">Enable link</button>
<script>
document.getElementById('hitMe').onclick = function() { // button click
  document.querySelectorAll('a').forEach(a =>{
   a.onclick = function(e){
     e.preventDefault();
      return false;
    }
  });
};
document.getElementById("enable").onclick = function(){
  document.querySelectorAll('a').forEach(a =>{
   a.onclick = null;
  });
}
</script>

edited Feb 25 '19 at 02:36

answered Jun 23 '18 at 19:58

Unmitigated

76,500
11
62
80

Thank You for your help but I have tried this answer. – Sachin Singh Jun 23 '18 at 20:00
It opens new tab `about:blank` – Sachin Singh Jun 23 '18 at 20:00
For both of them? – Unmitigated Jun 23 '18 at 20:02
Your second answer is incomplete and first one is not working. – Sachin Singh Jun 23 '18 at 20:06
Incomplete in what way? – Unmitigated Jun 23 '18 at 20:07
1

In your second answer it is not acting like a link also. – Sachin Singh Jun 23 '18 at 20:12
Why do you need it to act like a link? – Unmitigated Jun 23 '18 at 20:14
If you have an onClick event, it will still act like a link. – Unmitigated Jun 23 '18 at 20:15
With Bootstrap, it should still work, provided the right class is given to the `` element. – Unmitigated Jun 23 '18 at 20:16

SirPilan · Answer 2 · 2018-07-25T18:29:05.930

1

By clicking the button, no more links will be followed.

Like this you still have the hover destination preview. Like google.de etc...

document.getElementById('hitMe').onclick = function() { // button click
  [...document.querySelectorAll('a')].forEach(function(el){
    el.onclick = function( e ) { // all 'a'
      return false;
    }
  });
};

<a href="https://google.com">Valid Link</a><br>
<button id='hitMe'>Disable link.</button>

edited Jul 25 '18 at 18:29

answered Jun 23 '18 at 20:46

SirPilan

4,649
2
13
26

You wanted a non-working link sir :D - if there is a problem please tell me - but not by telling me _there is a problem_ - this is not copy&paste ready solution – SirPilan Jun 23 '18 at 22:01
ah maybe the preventDefault part - thats jQuery – SirPilan Jun 23 '18 at 22:03
@Pilan `event.preventDefault()` is actually native Javascript. – Unmitigated Jul 25 '18 at 18:12
@SachinSinghedited the answer, works :) hev1 you are absolutely right, sorry, removed it :D – SirPilan Jul 25 '18 at 18:30
@Pilan No problem. – Unmitigated Jul 25 '18 at 18:34

score 0 · Answer 3 · answered Jan 19 '23 at 06:43

0

use

javascript:;

as href attribute and add

event.preventDefault()

onclick method.

<a href="javascript:;" onclick="event.preventDefault()">Click me</a>

answered Jan 19 '23 at 06:43

tasnuva rahman

71
1
1

How to get a link that do nothing

3 Answers3