javascript - 如何获得一个什么都不做的链接

Question

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

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