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

我看到的问题是，如果我点击地球，它会弹出一个带有 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()

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 中不是问题，现在手动设置行单击事件后它可以正常工作。

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

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

javascript

html

css

nonfactors-mvc-grid