Question

我有一个小问题，比如，

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

Jquery的：

 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>

Answer 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');
}

Answer 2

两个选项：

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，则首先调用该处理程序，并且由于它停止了该事件，因此根本不会调用另一个处理程序。

Live Example | Source

2。使用一个处理程序并单击

进行检查

或者使用一个处理程序但后来看到点击是否在span：

中

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

Live Example | Source

Answer 3

$("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');
});

请参阅demo

Answer 4

您需要创建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();
});

Answer 5

你去吧

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

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

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

需要注意的重要事项是在span单击处理程序中返回false会阻止事件传播到其DOM父项。我认为jquery调用event.stopPropagation（）来做这件事。

我觉得用你的例子测试很难，我可以建议：

用id
将文字添加到span，因为我看到您的文字位于td
为跨度添加一些边框（仅用于测试），以便您可以看到跨度实际完成的位置

在具有span，jQuery的同一个上调用两个不同的函数

5 个答案:

1。连接两个处理程序：

2。使用一个处理程序并单击