如何忽略被点击元素下面的元素 - 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>

所以，当我点击一行时，它会转到该项目的视图，如果我点击glyphicon-globe，则会转到http://google.com

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

如何点击字形图标忽略下面的元素？即如果我点击地球图标，页面不应重定向，但应打开一个新标签并导航到谷歌

this fiddle说明了我的问题

Answer 1

您可以使用

  

event.preventDefault();如果调用此方法，则事件的默认操作不会   触发。

     

event.stopPropagation();防止事件冒泡DOM树，防止任何父处理程序被通知事件。

//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()

Answer 2

这一定是Nonfactors Mvc-Grid library的一些怪癖，因为当我这样做时它工作正常

从网格初始化

中删除了rowClicked选项

$(document).ready(function () {
    $('.mvc-grid').mvcgrid({
        reloadEnded: function () { $('.lds-facebook').hide(); }
    });

根据Eddie的建议添加以下代码

$(function () {
    $("body").on('click', '.rowWorkspaceLink .glyphicon-globe', function (event) {
        event.stopPropagation(); //Add this so the the even of the parent will not be executed
    });


    $("body").on('click', '.crmtRow', function (event, data) {
        var id = $(this).closest('tr').find('td:first').text();
        window.location.href = "@Url.Action("Details", "CRMTItems")/" + id;
    });
});

现在似乎有效。我说这必须是由NonFactors库中某处的rowClicked选项引起的，因为这不是jsfiddle中的问题，现在它在手动设置行点击事件后工作正常。