Question

我正试图阻止对具有类名“ disable”的“ 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();
});

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.disable').each(function(){
          $(this).click( function(event) {
             alert("Prevent");
             event.preventDefault();
          });
     });

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

JQ或JS：防止“ a”标记更改网址#hash

3 个答案: