JQ 或 JS：防止“a”标签更改 url #hash答案

【问题标题】：JQ or JS: Prevent "a" tag to change url #hashJQ 或 JS：防止“a”标签更改 url #hash
【发布时间】：2019-09-23 10:49:21
【问题描述】：

我试图阻止对具有类名“禁用”的“a”标签的任何点击，我尝试了很多代码，但没有一个能阻止“a”......

          <a href="#view-home" class="tab-link tab-link-active">
            <i class="icon f7-icons ios-only">today</i>
            <i class="icon f7-icons ios-only icon-ios-fill">today</i>
            <i class="icon material-icons md-only">today</i>
            <span class="tabbar-label">Home</span>
          </a>
          <a href="#view-games" class="tab-link disable">
            <i class="icon f7-icons">rocket_fill</i>
            <i class="icon f7-icons ios-only icon-ios-fill">rocket_fill</i>
            <span class="tabbar-label">Games</span>
          </a>
          <a href="#view-todo" class="tab-link disable">
            <i class="icon f7-icons">layers_alt_fill</i>
            <i class="icon f7-icons ios-only icon-ios-fill">layers_alt_fill</i>
            <span class="tabbar-label">Todo</span>
          </a>
          <a onclick="loadFirebase()" href="#view-download" class="tab-link disable">
            <i class="icon f7-icons">download_fill</i>
            <i class="icon f7-icons ios-only icon-ios-fill">download_fill</i>
            <span class="tabbar-label">Download</span>
          </a>
          <a onclick="loadFirebase()" href="#view-search" class="tab-link disable">
            <i class="icon f7-icons ios-only">search</i>
            <i class="icon f7-icons ios-only icon-ios-fill">search</i>
            <i class="icon material-icons md-only">search</i>
            <span class="tabbar-label">Search</span>
          </a>

这段代码给了我一个警报，但它仍然会更改#hash 以更改页面。

$('a#preventPage').on('click', function(event) {
  alert("Prevent");
  event.preventDefault();
});

【问题讨论】：

试试这个<a href="javascript:void(0)" onclick="fn()">fn is called</a>
@SouravDutta 我不明白，很抱歉不清楚，但我想使用 JQ 或 JS 阻止它，因为我只想在您未登录时阻止它。感谢您的帮助。
查看post
试试这是 jQuery $(document).ready(function() { $('#exampleLink').click(function() { alert('You clicked the link.'); return false; }); });
不幸的是，这并没有阻止#hash 抛出:(

标签： javascript jquery html hash

【解决方案1】：

这应该可以解决问题：

Array.from(document.querySelectorAll('a.disable')).forEach(c => {
  c.href = '';
  c.onclick = e => e.preventDefault();
});

<a href="#view-home" class="tab-link tab-link-active">
  <i class="icon f7-icons ios-only">today</i>
  <i class="icon f7-icons ios-only icon-ios-fill">today</i>
  <i class="icon material-icons md-only">today</i>
  <span class="tabbar-label">Home</span>
</a>
<a href="#view-games" id="preventPage" class="tab-link disable">
  <i class="icon f7-icons">rocket_fill</i>
  <i class="icon f7-icons ios-only icon-ios-fill">rocket_fill</i>
  <span class="tabbar-label">Games</span>
</a>
<a href="#view-todo" class="tab-link disable">
  <i class="icon f7-icons">layers_alt_fill</i>
  <i class="icon f7-icons ios-only icon-ios-fill">layers_alt_fill</i>
  <span class="tabbar-label">Todo</span>
</a>
<a onclick="loadFirebase()" href="#view-download" class="tab-link disable">
  <i class="icon f7-icons">download_fill</i>
  <i class="icon f7-icons ios-only icon-ios-fill">download_fill</i>
  <span class="tabbar-label">Download</span>
</a>
<a onclick="loadFirebase()" href="#view-search" class="tab-link disable">
  <i class="icon f7-icons ios-only">search</i>
  <i class="icon f7-icons ios-only icon-ios-fill">search</i>
  <i class="icon material-icons md-only">search</i>
  <span class="tabbar-label">Search</span>
</a>

【讨论】：

什么都没有发生，我仍然进入#hash页面）：
这确实阻止了点击，但我希望能够点击按钮，得到一个警告说它已被禁用，然后阻止#hash 抛出。
您如何确保这不起作用并且正在添加哈希？ @Miroslav 代码似乎很好。虽然我会使用 NodeList 的破坏而不是 Array.from 像 [...document.querySelectorAll('a.tab-link.disable')].forEach(...) 这样。
@andris.vilde 因为他的代码阻止点击按钮。我希望能够单击按钮但阻止添加#hash。

【解决方案2】：

你的代码应该是：

$('a.disable').each(function(){
          $(this).click( function(event) {
             alert("Prevent");
             event.preventDefault();
          });
     });

【讨论】：

这段代码甚至没有提醒我一些反应
@Gnusson 再次尝试我将禁用的类更改为现在禁用
#hash 仍在改变页面
这不起作用，我收到警报但它不会阻止#hash
也许你有另一个脚本怎么做。

【解决方案3】：

添加自定义事件侦听器并防止在a 标签上自动添加默认侦听器。

[...document.querySelectorAll('a.disable')].forEach(element => {
  element.addEventListener('click', event => {
    event.preventDefault();
    alert('prevented disabled button');
  });
});

a {
  font-family: Tahoma;
  border: 1px solid black;
  border-radius: 3px;
  text-decoration: none;
  color: black;
  padding: 5px;
}

a.disable {
  color: darkgrey;
}

a:hover {
  background-color: lightgray;
}

<div>
  <a href="#home">Home</a>
  <a href="#work">Work</a>
  <a href="#nowhere" class="disable">Nowhere</a>
</div>

【讨论】：

不幸的是，这并不能阻止框架 7 上的哈希