A-Link 内的 Bootstrap Popover 元素；防止触发 A-Link 点击答案

【问题标题】：Bootstrap Popover Element Inside A-Link; Prevent A-Link Click From FiringA-Link 内的 Bootstrap Popover 元素；防止触发 A-Link 点击
【发布时间】：2017-12-09 04:41:17
【问题描述】：

我有一个 Bootstrap 弹出窗口图像，它应该显示一个弹出窗口。此 IMG 位于具有自己的 Click Handler 的 A 链接中。

我的目标是防止父 A-Click 触发；当您单击图像时，您看到的唯一内容是弹出窗口，而不是真正的 A-Click 操作（警告框）。

我知道这是通过e.stopPropagation() 完成的，但问题是，我如何访问 Bootstrap Popover 的 Click Handler？我会把e.stopPropagation放在哪里？

$('[data-toggle="popover"]').popover();

$('#link').off('click.link').on('click.link', function() {
    alert('Clicked main link');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<a id="link" href="#" style="width:300px; height:100px; border:1px solid black;">Main Link

<img src="abc.png" data-toggle="popover" data-placement="bottom" data-original-title="" data-content="PopOver Tooltip" aria-describedby="tooltip">
</a>

让我说明为什么 IMG 必须在 A 内。A 是 Accordion 菜单栏，它们都有固定的宽度。您可以通过选择菜单进入页面（您不必在文本上单击鼠标右键）。一些菜单项还有一个显示弹出窗口的 INFO I 图标。 I-Icon 的作用应该是显示弹出框。 A-link 本身的行为应该是正常访问页面。

【问题讨论】：

你的anchor基于以上代码提供零功能；正如您所注意到的，它没有链接到任何地方，它也没有提供任何必要的目的。我会问显而易见的；如果它的使用需要你使用 JavaScript 绕过它的基本功能，为什么还要使用它呢？
答案是，链接是菜单项，它们的标题旁边还有一个信息图标。有时用户可以单击信息图标来查看菜单的内容，并在实际选择菜单之前获得工具提示。这有意义吗？
b - 但如果他们的href 值始终为#，您可以通过简单地使用不同的元素（如<button>）来避免整个问题
@RobertC bootstrap 可能无法提供<button> 所需的样式，它可能只适用于锚元素。
@ErikPhilips - Bootstrap 不在乎你在这种情况下使用什么元素。

标签： jquery twitter-bootstrap

【解决方案1】：

根据我们在 cmets 中的对话，我相信有更好的替代方案来依赖锚元素来实现这一点，并鼓励您探索像 <button> 这样的替代方案，因为该项目的目的似乎更适合该元素。

话虽如此，解决手头的问题：

如果您将一个类添加到您的锚元素，以便您可以通过 JavaScript 定位它，那么您的解决方案非常简单：

$('a.poplink').click(function(e) {
  e.preventDefault();
});

这将阻止任何具有poplink 类的锚元素处理点击事件，而不禁止绑定到您的<img> 的Bootstrap Popover 事件。

$('[data-toggle="popover"]').popover();

$('a.poplink').click(function(e) {
  e.preventDefault();
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a id="link" href="http://google.com" class="poplink" style="width:300px; height:100px; border:1px solid black;">
  Main Link
  <img src="abc.png" data-toggle="popover" data-placement="bottom" data-original-title="" data-content="PopOver Tooltip" aria-describedby="tooltip">
</a>

【讨论】：

但这会丢失链接中的操作，这是一个警告框。 A-link 本身有一个单独的动作，应该保留。 IMG 本身应显示弹出框。
然后你需要将这两个项目分开。无论您单击Main Link 还是仅单击img，alert 总是会触发，因为两者都是<a>...</a> 的一部分
Robert -- 我在原始帖子中上传了一张图片来说明我为什么需要这个。菜单项具有固定宽度。我不能只单击文本跨度本身，菜单就是整个栏。但有时它有一个带有弹出框的 I 图标。

【解决方案2】：

我终于解决了……

$('[data-toggle="popover"]').popover();

$('#link').off('click.link').on('click.link', function(e) {
    e.preventDefault();
    if (e.target.nodeName != "IMG") {
      alert('Clicked main link');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<a id="link" href="#" style="width:300px; height:100px; border:1px solid black;">Main Link

<img src="abc.png" data-toggle="popover" data-placement="bottom" data-original-title="" data-content="PopOver Tooltip" aria-describedby="tooltip">
</a>

【讨论】：