jQuery点击表格单元格事件

Question

我有一个如下的 HTML 代码：

<tbody>
  <tr id="info">
    <td class="name">Joe</td>
    <td class="surname">White</td>
    <td class="age">25</td>
 </tr>
</tbody>

有一个jQuery代码如下：

$("tr#info").click(function() {        // function_tr
  $(this).css("background-color","yellow");
});

$("tr#info td").click(function() {     // function_td
  $(this).css("font-weight","bold");
});

当我点击 td 时，function_td 能够正常工作，但是 function_tr 也会被触发。
如何防止 function_tr 的触发？

- namco

Answer 1

你需要使用 event.stopPropagation()

$("tr#info td").click(function(e){     //function_td
  $(this).css("font-weight","bold");
  e.stopPropagation();
});

- BenMorel

Answer 2

$("tr#info td").click(function(e){     //function_td
  $(this).css("font-weight","bold");
  e.stopPropagation();
});

http://api.jquery.com/event.stopPropagation/

- Amjad Masad