JQ или JS: Запретить тег "a" для изменения URL-адреса #hash

Question

Я пытаюсь предотвратить любые нажатия на теги "a" с именем класса "disable", я пробовал много кодов, но ни один из них не помешал "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();
});

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

Answer 2

Добавить пользовательский прослушиватель событий и запретить прослушиватель по умолчанию, который автоматически добавляется в теги 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>

Answer 3

Эй, ваш код должен быть:

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