Javascript onsubmit 触发父 onclick

Question

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

我的行如下所示：

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

Answer 2

这是解决方案

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

Answer 3

我自己运行解决了这个问题，这个 post 帮助了我：

所以你需要像这样设置：

var parent = document.getElementsByClassName("parent")[0];
var child = document.getElementsByClassName("child")[0];

parent.addEventListener("click", function(e) {
  alert("you clicked parent"); 
  if (e.target !== this) {
    return;
  }

  e.stopPropagation();
  // parent.style.color = "green";
});

child.addEventListener("click", function(e) {
  alert("you clicked child"); 
  if (e.target !== this) {
    return;
  }

  e.stopPropagation();
});

.parent {
  width: 500px;
  height: 500px;
  background-color: red;
}
.child {
  width: 200px;
  height: 200px; 
  background-color: blue;
}

<div class="parent">
  <div class="child">
    
  </div>
</div>

在您的情况下，也许可以尝试包含一个脚本，其中包含调用 onclick 元素属性的函数以提高可读性：

<tr onclick="changeLocation(e, '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>

<script>
function changeLocation(e, reference) {
      if (e.target !== this) {
        return;
      }

      e.stopPropagation();

    window.parent.location.href=reference;
}
</script>

或者更好的传播事件函数：

<tr onclick="stopProp(this); 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="stopProp(this); return confirm('Are you sure?');">
  </form>
</td></tr>

<script>
function stopProp(e) {
      if (e.target !== this) {
        return;
      }

      e.stopPropagation();
}
</script>

Answer 4

谢谢大家 - 我使用了 sanketd617 的解决方案并且它工作正常 - 对于 onsubmit 的错误感到抱歉 - 在我的文件中它在 -tag 中 - 我输入了它但没有 copy/paste代码，因为我的代码有点复杂。

我也尝试了 Aricha 的代码，但它对我不起作用 - 它仍然执行详细信息页面，但也许我在那里也犯了一个错误。我以前尝试过类似的解决方案，但它对我没有用。

但是我没有在输入元素的onclick中找到onclick="event.stopPropagation()"的真正简单的解决方案。非常感谢

Javascript onsubmit 触发父 onclick

Javascript onsubmit triggers parent onclick

javascript

onclick

submit

onsubmit