skip to Main Content

I have a Bootstrap Popover Image which should display a popup. This IMG is inside an A-link which has its own Click Handler.

My goal is to prevent the Parent A-Click from firing; when you click the image, the only thing you see is the popup, but not the real A-Click action (the alert box).

I know that this is done via e.stopPropagation() but the problem is, how do I get access to Bootstrap Popover’s Click Handler? Where would I put 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>

Let me show why the IMG has to be inside the A. The A’s are Accordion Menu Bars, and they all have a fixed width. You can go to a page by selecting a menu (you don’t have to click right on the text). Some menu items also have an INFO I icon that displays a popup. The action of the I-Icon should be to display the popover. The action of the A-link itself should be to go the page as normal.
enter image description here

2

Answers


  1. Chosen as BEST ANSWER

    I finally solved it...

    $('[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>


  2. Per our conversation in the comments I believe there are superior alternatives to relying on an anchor element to achieve this and would encourage you to explore alternatives like <button> since the purpose of this item seems to be better suited for that element.

    That being said, to address the question at hand:

    If you add a class to your anchor element so that you can target it via JavaScript your solution is quite simple:

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

    This will prevent any anchor element with the class of poplink from processing a click-through event, without prohibiting the Bootstrap Popover event tied to your <img>.

    $('[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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search