javascript - 使用 <TR> 上的 jquery 触发器使链接在行内可用

Question

我有一个表，在 ROWS(元素)中我有一个通过 jquery 触发模式弹出窗口的类。

因此，如果您单击表格中的任何元素，就会弹出模式。

我想在这里解决的问题是:在一个列中我有一个人的名字，这个名字是指向这个人的个人资料的链接，但是当我点击这个人的名字时、模态弹出窗口等，href/链接不起作用。

有没有任何只有 html/css 的干净解决方案(比如 z-index，或位置，或者元素位置)？或者我将不得不使用 js/jquery 来解决它？

简单的例子:

<tr class="popup-trigger">
 <td> title </td>
 <td> <a href="XXX"> Person </a> </td>
</tr>

提前致谢。

Answer 1

单击 anchor 时，事件会上升到 tr。

所以给 anchor 一个类并使用.stopPropagation()像这样:

$(".popup-trigger").on("click",function(){
  console.log("Opening modal.");
});

$(".table_anchor").on("click",function(e){
  e.stopPropagation();
  console.log("Link click... Not opening modal.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
  <tr class="popup-trigger">
   <td> Title (triggers modal) </td>
   <td> <a class="table_anchor" href="#"> Person name (not triggering modal) </a> </td>
  </tr>
</table>