Javascript onsubmit触发父onclick

我有一个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>

textprice

因此，它应该是这样工作的：如果我在大小字段中单击，或者在提交按钮上单击，则不应该调用详细信息页面

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

试试看

<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的更正。

这是解决方案

<tr onclick="var x = event.clientX;var y = event.clientY;if(document.elementFromPoint(x, y).tagName.toLowerCase()!='input'){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" onclick="return confirm('Are you sure?');">
  </form>
</td>
</tr>

textprice

我自己也遇到了这个问题，这篇文章帮助了我：

因此，您需要设置如下内容：

<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>

var parent=document.getElementsByClassName（“parent”）[0]；
var child=document.getElementsByClassName（“child”）[0]；
parent.addEventListener（“单击”，函数（e）{
警报（“您单击了父项”）；
如果（例如，目标！==此）{
返回；
}
e、 停止传播（）；
//parent.style.color=“绿色”；
});
addEventListener（“单击”，函数（e）{
警报（“您单击了子项”）；
如果（例如，目标！==此）{
返回；
}
e、 停止传播（）；
});
.parent{
宽度：500px；
高度：500px；
背景色：红色；
}
.孩子{
宽度：200px；
高度：200px；
背景颜色：蓝色；
}
谢谢大家-我使用了sanketd617的解决方案，效果很好-对于onsubmit的错误表示抱歉-在我的文件中，它位于-标记中-我键入了它，没有复制/粘贴代码，因为我的代码有点复杂

我也尝试了Aricha的代码，但它对我不起作用-它仍然执行详细信息页面，但可能我也犯了一个错误。我以前也尝试过类似的解决方案，但对我来说从未奏效

但是我没有在输入元素的onclick中找到使用onclick=“event.stopPropagation（）”的真正简单的解决方案。非常感谢
我不完全理解，您不想在
onclick=“”
中使用函数吗？像
onclick=“goToPage（'details.php？id=123'）”
为什么按钮有onsubmit处理程序？那是不对的。是的，你是对的。这是在@E.Reuter发布的代码中。谢谢你的批改：）