Javascript确认框，点击取消不起作用，页面仍然加载

Question

我有一个项目使用确认框javascript，如果用户单击取消然后什么都不做，但页面仍然加载，我搜索所有关于确认框但我找不到我要找的东西，请帮助我，这里有一些代码javascriptfunction OnClickNextPage(){  var result = confirm("Are you sure ?");  if (!result) {  return false;   } }html<a href="http://localhost" data-ajax="?link1=saved-posts" onclick="return OnClickNextPage();">Test</a>谢谢

Answer 1

您必须将点击事件“终止”到 a 标签，为此，您必须将事件对象传递给OnClickNextPage函数，然后调用.preventDefault()该事件。return false;动作不影响onclick事件。

HTML

<a href="http://localhost" data-ajax="?link1=saved-posts" onclick="OnClickNextPage(event);">Test</a>

Javascript

function OnClickNextPage(event) {

  var result = confirm("Are you sure ?");

  if (!result) {

    event.preventDefault(); // prevent event when user cancel

  }

  // go to page in a tag's href when user choose 'OK'

}

Answer 2

尝试

  function OnClickNextPage(e){

e.preventDefault();

     var result = confirm("Are you sure ?");

      if (!result) {

      return false;

       }

     }

编辑 -

对不起，我的错，问题是你在 href 中调用页面加载事件，最终触发 DOM 的优先级

<a href="http://localhost" data-ajax="?link1=saved-posts" onclick="OnClickNextPage();">Test</a>

像这样试试

 <a href="#" onclick="OnClickNextPage();">Test</a>

function OnClickNextPage(e){

   e.preventDefault();

    var result = confirm("Are you sure ?");

      if (!result) {

        return false;

      } else {

         window.location.href = [[Your URL Here]]

      }

 }

Answer 3

您必须使用 preventDefault() 函数来阻止事件的默认行为，而不是返回 false。这是代码

<a href="http://localhost" data-ajax="?link1=saved-posts" onclick="OnClickNextPage();">Test</a>

function OnClickNextPage(event){

  var result = confirm("Are you sure ?");

  if (!result) {

     event.preventDefault();

   }

 }