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>

单击链接后，所有内容均由在click事件中执行的功能处理。我要做的就是创建一个链接，以便用户可以在新选项卡中打开它，并且应用程序的状态应该完全不变。那怎么可能？我尝试使用路由来做到这一点，但是事情变得更加复杂。我还从此处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>

如何获得无所作为的链接

2 个答案: