如何忽略被点击元素下方的元素 - NonFactors MVC Grid
How to ignore the element below the clicked element - NonFactors MVC Grid
我正在使用 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 说明了我的问题
您可以使用
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
});
这一定是 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 中不是问题,现在手动设置行单击事件后它可以正常工作。
我正在使用 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 说明了我的问题
您可以使用
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
});
这一定是 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 中不是问题,现在手动设置行单击事件后它可以正常工作。