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>

我有整个表可点击，应该将我发送到另一个带有data-id的页面在每个表中，有一个部分允许用户单击文本“查看更多”以扩展该单元格中的文本。

我的问题是，每当我尝试点击“查看更多”时，它也会执行表格onclick 有没有办法阻止它冲突？我怎样才能做到这一点？

Answer 1

默认情况下，单击事件将向文档（DOM）冒泡（传播），并且将触发具有单击事件侦听器的任何其他祖先。你允许点击elemt，但是阻止它冒泡，你可以使用native JavaScript stopPropagation() function或jQuery's implementation of stopPropagation()（看起来只是使用原生方法）。

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

1 个答案: