如何使链接可点击但也不可点击？答案

【问题标题】：How to make a link clickable but also not?如何使链接可点击但也不可点击？
【发布时间】：2016-01-18 18:23:46
【问题描述】：

所以我正在开发我的网上商店，并做最后的工作，以使其看起来更漂亮。

我以为你知道什么会很酷？如果有一个问号表示您可以搜索什么。几秒钟后它就在那里......但是......你不能悬停在移动设备上，所以我想。便宜的修复。使其可点击。事实证明，这并不是一个便宜的解决方案，因为如果您单击它，它会将您链接到页面顶部。如何使弹出框可点击，但无处可去，也不会刷新页面或任何东西？

到目前为止我得到了这个：`

    <form method="GET" action="search.php#shop" class="navbar-form navbar-right">
      <a href="#" title="Zoektermen" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="U kunt zoeken op land, beschrijving, naam en merk."  >
        <p class="fa fa-question"></p>
      </a>
      <input id="form" name="id" type="text" placeholder="Producten zoeken" class="form-control" />
      <button type="submit" class="btn btn-primary">Zoekresultaten tonen</button>
    </form>
</div>

有点卡在这里，所以我们将不胜感激！提前致谢附言不要介意文字。这是荷兰语：P

脚本是：

<script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script>

【问题讨论】：

你为什么不用bootstrap popover插件？
This question 看起来相关
@DavidBarker 我正在使用它，但它仍然链接。
@Rafi 我真的很想像 bootstrap 那样做弹出框，因为我到处都使用它。
@JessieDenRidder event.preventDefault() 会有所帮助。

标签： html css twitter-bootstrap-3 href popover

【解决方案1】：

先给它一个id或者class

<a href="#"  id="popover_button" title="Zoektermen" data-toggle="popover" data-trigger="facous" data-placement="left" data-content="U kunt zoeken op land, beschrijving, naam en merk."  ></a>

比使用 jQuery 禁用该功能

<script type="text/javascript">
$('#popover_button').click(function(e){
    e.preventDefault();
});
</script>

【讨论】：

是的，就像有人评论我的原始帖子一样。他说要把它放在封闭的地方。我更喜欢你的方式，因为它在代码中看起来更干净。谢谢！
@JessieDenRidder 是的，这绝对是一个非常干净的解决方案 :)

【解决方案2】：

添加到<a>nchor：

onclick="e.preventDefault();"

或

onclick="return false;"

或

href="javascript:void(0)"

如果你提供实际使用的功能会更容易。

<form method="GET" action="search.php#shop" class="navbar-form navbar-right">
  <a href="#" title="Zoektermen" data-toggle="popover" data-trigger="facous" data-placement="left" data-content="U kunt zoeken op land, beschrijving, naam en merk." onclick="e.preventDefault();">
    <p class="fa fa-question"></p>
  </a>
  <input id="form" name="id" type="text" placeholder="Producten zoeken" class="form-control" />
  <button type="submit" class="btn btn-primary">Zoekresultaten tonen</button>
</form>

【讨论】：

你是说JAVA？或者你的意思是表单的作用？
是的，先生，<script>....</script> 但是如果您将其中的一行放在您的<a href=......</a> 中，它应该可以工作。尤其是最后一个。
那是脚本 :P <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script> 但是如果你看一下帖子，我已经知道答案了。谢谢你的努力！我很感激！
这是我刷新后看到的......zer00ne.tinytake.com/sf/NDU1OTQwXzI0NTY4NTg
糟糕，现在都修复了！感谢您的宝贵时间！

【解决方案3】：

<a href="#" title="Zoektermen"> My Text</a>

这应该可以正常工作。

【讨论】：

不，这正是我在没有弹出框的情况下所拥有的：P @dDavidBarker 有我正在寻找的答案。将 event.preventDefault() 放入闭包中即可解决所有问题