A-Link内部的Bootstrap Popover元素;防止A-Link单击“从射击”

Question

我有一个Bootstrap Popover Image，它应该显示一个弹出窗口。这个IMG位于一个A-link里面，它有自己的Click Handler。

我的目标是阻止父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是手风琴菜单栏，它们都有固定的宽度。您可以通过选择菜单转到页面（您无需在文本上单击右键）。某些菜单项还有一个显示弹出窗口的INFO I图标。 I-Icon的动作应该是显示弹出窗口。 A-link本身的动作应该是正常的页面。

Answer 1

根据我们在评论中的对话，我认为有更好的选择依靠锚元素来实现这一目标，并鼓励您探索<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>

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