How to ignore the element below the clicked element - NonFactors MVC Grid

I am using NonFactor MVC grid to create a grid with clickable rows:

$('.mvc-grid').mvcgrid({
    reloadEnded: function () { $('.lds-facebook').hide(); },
    rowClicked: function (row, data, e) { window.location.href = '@Url.Action("Details","CRMTItems")/' + data.Id }
});

Where the html generated for a row looks like this

<tr class="Opportunity crmtRow">
        <td class="hidden">9</td>
        <td>Project Name</td>
        <td>Client Name</td>
        <td>Project Owner</td>
        <td><a class="btn btn-default btn-sm rowWorkspaceLink pull-right" 
               href="http://google.com" 
               target="_blank"><span class="glyphicon glyphicon-globe"></span></a></td>
</tr>

So when I click on a row, it takes me to the view of that item, and if I click on the glyphicon-globe, it takes me to http://google.com

The problem I'm seeing is that if I click on the globe, it does pop out a new tab with google, but then in the original tab it also navigates to the item page. When hovering over the globe, I can see that hover is also being applied the row element

How can I get a click on the glyph icon to ignore the element below? I.e. if I click the globe icon, the page should not redirect, but a new tab should open and navigate to google

this fiddle illustrates my problem

You can use

event.preventDefault(); If this method is called, the default action of the event will not be triggered.

event.stopPropagation();Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

//Add a click event listener for elements with class .glyphicon-globe
$('.rowWorkspaceLink .glyphicon-globe').click(function(event) {
  event.preventDefault();   //Add this so that page will not open when click on .glyphicon
  event.stopPropagation();  //Add this so the the even of the parent will not be executed

  //Add the events for glyphicon
});

Doc: event.preventDefault(), event.stopPropagation()