javascript - 取消列级链接时阻止行级链接

Question

我有一张桌子...

<table class="data-table">
  <thead>
    <tr>
      <th width="16">ID</th>
      <th>Name</th>
      <th>Reference</th>
      <th>Link</th>
      <th>YouTube</th>
      <th>Status</th>
      <th width="16">Delete</th>
    </tr>
  </thead>
  <tbody>
    <tr class="clickable" data-href="/videos/1/">
      <td>1</td>
      <td>Test Video</td>
      <td></td>
      <td></td>
      <td></td>
      <td>
        <a href="/videos/delete/1" 
           onclick="return confirm_delete();">
          Delete
        </a>
      </td>
    </tr>
  </tbody>
</table>

而且剧本...

<script>
  function confirm_delete() {
    var result = confirm("Are you sure you want to delete this video?");
    return result;
  }
</script>

单击该行将转到正确的 URL。单击删除链接要求确认。如果我选择确定，它将采用正确的删除 URL，但如果我选择取消，它会取消删除 URL，但采用行级 URL。我怎样才能防止这种情况？

Answer 1

<a href="/videos/delete/1"
  onclick="event.stopPropogation(); return confirm_delete();">Delete</a>

但是，请帮自己一个忙，将您的 javascript 放在脚本标签中。

<a id="delete_1" href="/videos/delete/1">Delete</a>
...
<script>
    $('#delete_1').click(function(e) {
        e.stopPropogation();
        return confirm("Are you sure you want to delete this video?");
    });
</script>

Answer 2

感谢所有评论/回答的人。我做了以下事情来解决这个问题。

首先，我删除了onclick属性并向a标签添加了一个类。

<td><a class="delete" href="/videos/delete/1">Delete</a></td>

然后我做了以下脚本。

<script>
  $(document).ready(function() {
    $('a.delete').click(function(event) {
      var result = confirm("Are you sure you want to delete this video?");

      if (!result) {
        event.preventDefault();
        event.stopPropagation();
      }
    });
  });
</script>