Question

首先，我在这里和其他资源上检查了许多类似的问题，但是我仍然找不到所需的解决方案。我有一个链接到我的应用程序中特定页面的按钮，还有一个confirm（）框，询问用户是否要继续，如果他们单击确定，则应该加载下一页，如果他们单击取消新页面，不应加载，就好像根本没有单击该按钮一样。下面是按钮的HTML：

<a href="http://localhost:9000/index">
    <button onclick="myFunction()" type="button" class="btn btn-outline-primary btn-lrg" style="font-size:20px;">CANCEL</button>
</a>

现在我的JS用于确认框：

<script>
  function myFunction() {
    if (confirm("Are you sure you wish to cancel this configuration?")) {
      return true;
    } else {
      return false;
    }
  }
</script>

Answer 1

现在的问题是您的按钮正在触发该功能，但是您的 link 是正在重定向的按钮。

请记住，用<button>包裹<a>是invalid：

内容模型： Transparent，但不得有interactive content后代。

a元素可以包裹在整个段落，列表，表格等中，甚至包裹在整个段落中，只要其中没有交互内容（例如按钮或其他链接））。

一些替代方法：

使用<form>代替<a>

<form action="https://stackoverflow.com">
    <button type="submit" onclick="return confirm('Are you sure?')" class="btn btn-outline-primary btn-lrg" style="font-size:20px;">CANCEL</button>
</a>

完全删除<a>

function btnCancel() {
  if (!confirm("Are you sure?")) return false;
  location.href = "https://stackoverflow.com";
}

<button type="button" onclick="btnCancel()" class="btn btn-outline-primary btn-lrg" style="font-size:20px;">CANCEL</button>

完全删除<button>

<a href="https://stackoverflow.com" onclick="return confirm('Are you sure?')">Cancel</a>

如果单击取消按钮，如何使Javascript“ confirm（）”取消对新页面的请求？

1 个答案: