如何忽略单击元素下方的元素 - NonFactors MVC Grid答案

【问题标题】：How to ignore the element below the clicked element - NonFactors MVC Grid如何忽略单击元素下方的元素 - NonFactors MVC Grid
【发布时间】：2018-10-04 04:27:14
【问题描述】：

我正在使用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。如果我点击地球图标，页面不应该重定向，但应该打开一个新标签并导航到谷歌

this fiddle 说明了我的问题

【问题讨论】：

试试这个文件jsfiddle.net/hxkdL2zt/2
我已经加了return false，不需要加event.preventDefault();和event.stopPropagation();
@user1608841 这也有效，但它会阻止我已经在我的网格模板中设置的导航。似乎为了实现我想要的，我必须放弃地球的网格列模板，或网格初始化中的rockClicked选项
你可以使用 event.preventDefault();和 event.stopPropagation();

标签： javascript html css nonfactors-mvc-grid

【解决方案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()

【讨论】：

感谢您的回答 Eddie，但这似乎不起作用。添加该 sn-p 后，我得到了相同的结果，有趣的是，如果我在地球上单击鼠标中键，它的行为符合要求
不起作用是什么意思？如果你点击地球，它还会重定向吗？ @巴西
是的，我看到的结果和以前一样
你能清除或缓存什么的。我试过了，效果很好。
是的，但我仍然被导航到行链接..也许它只是不值得这样一个简单的功能工作太多了

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

【讨论】：