可点击表格与可点击内容冲突

Question

我正在使用<table>显示单独的表或数据“行”，如下所示：

<table data-id='1' onclick='someFunction($(this).data('id'));'>
<tr><td>row1</td><td>data</td></tr>
<tr colspan=2><a href='#' class='seemore'>see more</a></tr>
</table>

<table data-id='2' onclick='someFunction($(this).data('id'));'>
<tr><td>row2</td><td>data</td></tr>
<tr colspan=2><a href='#' class='seemore'>see more</a></tr>
</table>

<table data-id='3' onclick='someFunction($(this).data('id'));'>
<tr><td>row3</td><td>data</td></tr>
<tr colspan=2><a href='#' class='seemore'>see more</a></tr>
</table>

我有整个表格可点击，这应该将我发送到带有数据ID的另一页。
每个表中都有一个部分，允许用户单击文本“查看更多”以在该单元格中展开文本。

我的问题是，每当我尝试单击“查看更多”时，它也会执行表onclick。
有没有办法阻止它发生冲突？ 我该如何进行这项工作？

Answer 1

默认情况下，单击事件将使文档（DOM）冒泡（传播），并且将触发具有单击事件侦听器的任何其他祖先。 您可以单击elemt，但不要使它冒泡，您可以使用本机JavaScript stopPropagation（）函数 ，也可以使用jQuery的stopPropagation（）实现 （似乎只使用本机方法）。