0

我有一个小问题，比如，

我想为同一个调用两个函数td，1.如果用户点击 td ，调用一个函数，2.当用户点击跨度时td。

查询：

 if (jQuery(tr).find("td span").hasClass('drill_icon')) {
        console.log('DRILL DOWN : ');    
    } else {
        console.log('SELECT/UNSELCT : ');
    }

我尝试了上面的 jquery 调节，但没有帮助。

请帮助我，如何检查用户是否点击了 td，或者用户是否点击了 span，我知道，如果我使用两个td，那么查找很容易：

<td title="Afghanistan" _colid="1" style="width: 95%; overflow: hidden;">Afghanistan<span class="right drill_icon"></span></td>
4

5 回答 5

1

使用两次点击功能

 $("span.drill_icon").click(function() {
   //span is clicked..
   spanClickedFunction();
   return false;  //to make sure td click is not called here..this stops the event and td handler won't be called;
});

$("tr td").click(function() {
   //td is clicked..
   tdClickedFunction();

});

function spanClickedFunction(){
  alert('span clicked');
}

function tdClickedFunction(){
  alert('td clicked');
}
于 2013-01-11T08:42:32.447 回答
0

两种选择：

1. 连接两个处理程序：

一个用于span：

$("span.drill_icon").click(function() {
    // Do your thing here

    // Stop the event
    return false;
});

...还有一个在td：

$("selector for td").click(function() {
    // Do the thing
});

如果单击在 上span，则该处理程序将首先被调用，并且由于它停止事件，因此根本不会调用另一个处理程序。

实例| 来源

2.使用一个处理程序并点击检查

或者使用一个处理程序，然后查看点击是否在span：

$("selector for td").click(function(e) {
    // In the span?
    if ($(e.target).closest("span.drill_icon")[0]) {
        // Yes
    }
    else {
        // No
    }
});

实例| 来源

于 2013-01-11T08:40:48.323 回答
0 
$("table td span.drill_icon").click(function (e){
   alert('Clicked on span');
   e.stopPropagation(); // stops further propagation
});

$("table td").click(function (){
   alert('Clicked on td');
});

看演示

于 2013-01-11T08:45:35.587 回答
0

您需要创建 2 个单击处理程序。一个用于 TD，一个用于跨度。 

$("td").click(function() {
    //code that executes when clicked in the td but not in span
});

$("td span.drill_icon").click(function(event) {
    //code that executes when clicked in the span

    //prevents that the click-event gets fired on the parent elements
    event.stopPropagation();
});
于 2013-01-11T08:46:40.063 回答
0

干得好

<script type="text/javascript">
    $(function () {

        $("td").click(function () {
            alert("click on td");
        });

        $("td span").click(function () {
            alert("click on span");
            return false;
        });
    });
</script>

需要注意的重要一点是 span click 处理程序中的 return false 会阻止事件传播到其 DOM 父级。我认为 jquery 调用 event.stopPropagation() 来做这件事。

我发现很难用你的例子进行测试，我可以建议：

  • 用 id 替换 _colid
  • 将文本添加到 span 因为我看到您的文本在 td 中
  • 为跨度添加一些边框（仅用于测试），以便您可以看到跨度实际完成的位置
于 2013-01-11T08:46:41.120 回答