javascript - 如何忽略被点击元素下方的元素 - NonFactors MVC Grid

Question

我正在使用 NonFactor MVC grid创建具有可点击行的网格:

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

为一行生成的 html 看起来像这样

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

所以当我点击一行时，它会将我带到该元素的 View ，如果我点击 glyphicon-globe，它会把我带到 http://google .com

我看到的问题是，如果我点击地球，它会弹出一个带有 google 的新标签，但随后在原始标签中它也会导航到元素页面。将鼠标悬停在地球上时，我可以看到 hover 也应用于行元素

我怎样才能点击字形图标来忽略下面的元素？ IE。如果我单击地球图标，页面不应重定向，但应打开一个新选项卡并导航到 google

this fiddle说明了我的问题

Answer 1

你可以使用

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
});

文档:event.preventDefault() , event.stopPropagation()