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

Posted 2023-03-29

【中文标题】JQ 或 JS：防止“a”标签更改 url #hash

【英文标题】：JQ or JS: Prevent "a" tag to change 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 抛出:(

【参考方案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 上的哈希