javascript - 嵌套 HTML 元素中的冲突事件

Question

我有嵌套的事件监听器。他们正是

<tr onclick="function1();">
<td>....</td>
<td onclick="function2();">....</td>
</tr>

单击第二个单元格时，应仅调用 function2() 而不是 function1()。有没有办法做到这一点？

Answer 1

在函数中传递事件对象并调用 stopPropagation 以停止事件传播。

现场演示

<tr onclick="return function1(e);">
  <td>First Td....</td>
 <td onclick="return function2();">second td....</td>
</tr>

function function2(e)
{
  //your statements.
   alert("function2");
   e.stopPropagation();
}

Answer 2

可以使用event.stopPropagation停止事件

function(e) {
   var event = e || window.event;
   event.stopPropagation();
}

请参阅此处的答案以获取更多讨论：如何使用内联 onclick 属性停止事件传播？