jquery - 从子元素覆盖父元素的单击事件

Question

我有以下 HTML:

<table>
    <tr>
        <td><div>test</div></td>
        <td>Some Text</td>
    </tr>
</table>

使用 JQuery，我有一些代码在用户单击 TR 元素时运行。效果很好。

但是，当有人单击 TD 元素内的 DIV 时，我只需要 DIV 的“单击”事件，而不是父级的 TR“单击”事件。

我怎样才能做到这一点？

提前感谢大家!

Answer 1

使用stopPropagation:

$(function() {
    $('tr').bind('click', function (e) {
        console.log('tr');
    });
    $('div').bind('click', function(e) {
        e.stopPropagation();
       console.log('div');
   });

});

jsfiddle