0

我的页面中有一个小部件。如果我单击小部件的任何部分，它应该导航到下一页，其中包含有关该小部件的一些详细信息。如果我单击该小部件中可用的名为“likes”的跨度，我需要打开一个对话框。但是，即使我单击该链接，它也会导航到下一页。

如果我单击除该链接之外的小部件的任何部分，它应该导航到下一页。

这是点击的正常代码：

 $('td#' + parentElement).find('div.streamcontenttopmain').click(function() {
            window.location.href = 'TaskDetails.aspx?id=' + json_row.id + '&community=' + getQueryParam('community');
        });

如果我单击小部件中的任何位置，此代码将导航到下一页

我的跨度定义如下：

<span class="flft likes" style="MARGIN-LEFT: 2px">

这是我尝试过的：

 $('td#' + parentElement).find('div.streamcontenttopmain').click(function (e) {

            if ($(this).hasClass("flft likes")) {

                alert("hi");
            } else {
                window.location.href = 'TaskDetails.aspx?id=' +
                               json_row.id +
                               '&community=' +
                               getQueryParam('community');
            }
        });
4

3 回答 3

2

您可以阻止事件冒泡到div元素并触发它们的事件处理程序：

$('#' + parentElement).find('span.likes').click(function(e) {
    e.stopPropagation();

    // ...
});
于 2012-10-05T07:19:33.737 回答
1

如果您停止事件的传播，您可以在跨度中处理它，而它不会到达 div。这看起来类似于下面

$('td#' + parentElement).find('div.streamcontenttopmain').click(function(e){
      window.location.href = 'TaskDetails.aspx?id=' + 
                               json_row.id + 
                               '&community=' + 
                               getQueryParam('community');
})).find('span.likes').click(function(e) {
           e.stopPropagation();
           //do the span specific stuff here
});
于 2012-10-05T07:20:14.923 回答
1

您还可以执行以下操作：

$(document).ready(function(){
    $('div').click(function(e){
        if(e.toElement.nodeName == "SPAN")
            alert('span clicked');
        else
            alert('div clicked');
    });
});

我在这个演示中展示了它：http: //jsfiddle.net/SxhWy/3/

于 2012-10-05T07:26:54.527 回答