Clickable стол конфликтует с интерактивными содержанием

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> 

У меня весь стол кликабельным, который, как предполагается отправить меня другая страница с идентификатором данных.
Внутри каждой таблицы есть раздел, который позволяет пользователю нажимать на текст «видеть больше», чтобы развернуть текст в этой ячейке.

Моя проблема в том, что всякий раз, когда я пытаюсь нажать «увидеть больше», он также выполняет таблицу onclick.
Есть ли способ остановить его от конфликта? как я могу это сделать?

Answer 1

По умолчанию будет запущено событие клика (размножение) документа (DOM) и любого другого предка, у которого есть прослушиватель событий щелчка. Вы разрешаете клик на элементе, но не останавливайтесь на нем, вы можете либо использовать native JavaScript stopPropagation() function, либо jQuery's implementation of stopPropagation() (который, как представляется, использует только собственный метод).