0

我正在使用NonFactor MVC 网格创建一个带有可点击行的网格：

$('.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也被应用于行元素

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

这个小提琴说明了我的问题

4

2 回答 2

3

您可以使用

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

于 2018-04-24T02:54:35.030 回答
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;
    });
});

现在它似乎起作用了。我说这一定是由rowClickedNonFactors 库中的某个选项引起的，因为这在 jsfiddle 中不是问题，并且在手动设置行单击事件后它现在可以正常工作。

于 2018-04-24T03:56:04.903 回答