Javascript onsubmit 触发父级 onclick

Question

我有一个 html 页面，每行都有一个表格和一个表单。当我单击该行时，它应该打开一个详细信息页面，但是当我单击表单时，不应触发该页面。

我的行看起来像这样:

<tr onclick="window.parent.location.href='details.php?id=123';"><td><img /></td><td>text</td><td>price<br>
  <form method="post">
    <input type="number" name="size" value="1">
    <input type="submit" onsubmit="return confirm('Are you sure?');">
  </form>
</td></tr>

所以它应该像这样工作:如果我点击尺寸字段或提交按钮，则不应调用详细信息页面。

我发现可以使用 event.stopPropagation() 来实现这一点，但我不知道如何使用纯 JavaScript 来做到这一点，尽管似乎应该有一个简单的解决方案

Answer 1

尝试

<tr onclick="window.parent.location.href='details.php?id=123';">
    <td><img /></td>
    <td>text</td>
    <td>price<br> 
        <form method="post" onsubmit="return confirm('Are you sure?');"> 
            <input type="number" name="size" value="1" onclick="event.stopPropagation()"> 
            <input type="submit" onclick="event.stopPropagation()"> 
        </form> 
    </td>
</tr>

注意:从 input 元素中删除 onsubmit 并将其添加到表单元素中。感谢@epascarello 的更正。