How do I prevent a parent's onclick event from firing when a child anchor is clicked?

I have a container with a JS link and inside two real links

<article class="jq-click-blank" data-href="https://www.google.com">
  Text text text 
  <a href="https://www.facebook.com" target="_blank">real link 1</a>
  <a href="https://www.google.com" target="_blank">real link 2</a>
  Text text text 
</article>

<script>

$(document).ready(function() {
    
    $('.jq-click').on( "click", function() {
        var jqlink = $(this).data('href');
        window.location.href = jqlink;
    });
      
    $('.jq-click-blank').on( "click", function() {      
        var jqlink = $(this).data('href');
        window.open(jqlink, '_blank');      
    });
    
});

</script>

If the user clicks anywhere inside the container it will be activate the JS link but if the user clicks one of the real link it should activate only the real link but right know it triggers both

I actually could make all of them JS link but this may cause SEO and usability issue

How can I prevent my JS ( jQuery ) link to be triggered if I click a real link inside the box?

You need to sign in to view this answers

Related Post