如果用户误点击 link，如何停止用户并显示警告消息

Question

如果用户在填写表格时不小心点击了 header 中的任何链接，这些链接可以重定向到另一个页面。

所以我需要在重定向到另一个页面之前显示警告消息。

Answer 1

您可以声明一个全局变量（附加到 window ）来监听表单更改，一旦更改将其设置为 true ，

并在每个 link <a>（或 header link 取决于您的选择器）中单击设置侦听器，如果 true , 会弹出确认信息 , 否则直接离开页面

请参阅以下代码段：

window.alertOnClick = false;

$(function() {

  $("form").on("change", function() {
    console.log("change");
    window.alertOnClick = true
  });

  $("a").on("click", function(e) {
    //e.preventDefault();

    if (window.alertOnClick) {

      var confirmLeave = confirm("are you sur to leave this page !");
      confirmLeave ?
        "" : e.preventDefault();
    }
  })

})

ul li {
  display: inline;
  margin-left: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="https://www.google.com">googl</a></li>
  <li><a href="https://www.whosebug.com">stackoverfow</a></li>
  <li><a href="http://www.example.com">example</a></li>

</ul>


<form>
  name : <input type="text">
  <input type="radio" name="radio"> one
  <input type="radio" name="radio"> two


  <button type="button">submit </button>
  <form>

Answer 2

我找到了我一直在寻找的那种答案

Custom jquery plugin

jquery.are-you-sure.js 是一个自定义的 jquery 插件所以我们需要添加

  $('form').areYouSure();

但是我的表单的问题是它在内部加载时更新了一些字段。所以在用户体验上，即使他不更改页面上的任何内容并单击任何 header link，此插件也会弹出消息。

所以终于找到解决办法了，我需要在最后或者初始化所有表单字段后触发调用。

 $('#form').trigger('reinitialize.areYouSure');

如果用户误点击 link，如何停止用户并显示警告消息

How to stop user and show alert message if user by mistake click on link

javascript

jquery

twitter-bootstrap-3

frontend