如何获得什么都不做的链接

Question

我使用 Angular 和 Bootstrap 创建了一个搜索引擎。我创建了不同的结果选项卡，如图 Tabs 所示。当我们访问任何链接时，右键单击选项卡不会显示链接选项。 link on right click 目前我正在使用<li> 标签和引导程序来创建不同结果部分的选项卡。这是那个的代码

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

点击链接后，一切都由点击事件执行的函数处理。我想做的就是创建一个链接，以便用户可以在新选项卡中打开它，并且应用程序的状态根本不应该改变。这怎么可能？我曾尝试使用路由来做到这一点，但事情变得更加复杂。我也从这里Make a HTML link that does nothing (literally nothing) 关注了一些答案，但它们不起作用。请帮忙。我已经尝试了所有答案，在新标签中打开链接只会扰乱 URL 的状态。

Answer 1

使用<a href="#"></a> 将使页面滚动到顶部。

使用javascript:void(0):

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

或者等效地，使用javascript:;:

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

或者，对于 HTML5，只需省略 href 属性：

<a>Clicking here does nothing</a>

您可以使用event.preventDefault() 来防止链接的默认操作被执行。

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

Answer 2

点击按钮后，将不再有任何链接。

像这样，您仍然拥有hover 目标预览。比如google.de等等……

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>