点击链接后选择继续或不继续

Choosing to Continue or Not Continue after Clicking on Link

本文关键字：继续 选择 链接      更新时间：2023-09-26

我正在尝试做一些非常简单的事情:点击一个链接，弹出模态以继续或取消链接的URL，继续到URL或取消(实质上隐藏模态)。我的问题是当模式弹出时的"等待"期，当用户提示继续或取消时。现在，我的代码似乎从来没有运行过第一个waitForModalEvent()调用:

<a href="someURL" onclick='return handleClick()'> Click Here </a>

  function handleClick() {
    if (dataChanged()) {
        returnValue = false;
        displayModal();
        returnValue = waitForModalEvent();
        //never called at or past this point. Tested with alert()
        return returnValue;
    } else {
        return true;
    }
  }
  var continueClicked = false;
  var cancelClicked = false;
  function waitForModalEvent() {
    while(!continueClicked && !cancelClicked) {
        waitForModalEvent(); //I know this gives the browser some troubles
    }
    if (continueClicked) {
        return true;
    } else {
        return false;
    }
  }

我知道这段代码是错误的(特别是可怕的waitForModalEvent()递归调用，永远不会结束)。然而，我被困在如何解决这个问题，和返回true或false在handleClick()用户点击继续或取消后。我的设置使用<a href>的onclick本质上是一个坏的设置，我想要完成什么?

我已经阅读了关于回调的内容，但不明白如何在我的情况下使用回调(如果有的话)。将感谢任何形式的建议或见解!

您已经生成了一个锁定JavaScript事件循环的无限循环。在while循环结束之前，您在其中测试的变量永远不能更改。

如果你想基于基于DOM的对话框做一些事情，你必须用回调来做。在等待用户交互时，没有办法(在主机环境提供的函数(如confirm)之外)阻塞。

这里使用回调的一般方法是总是取消单击链接的默认操作，然后让回调复制其功能(或者只是在对话框中放置一个常规链接)

查看这段代码，查看使用jQuery UI的回调和模态对话的示例:

http://codepen.io/anon/pen/KdaRmP 

$('button.showModal').click(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      modal: true,
      buttons: {
        "Proceed to The Dividing Line": function() {
          $( this ).dialog( "close" );
          location.href='http://www.thedividingline.com/';
        },
        Cancel: function() {
          $('DIV.output').text('Canceled.');
          $( this ).dialog( "close" );
        }
      }
    });
});

我在这里使用了jQuery UI文档中的一个示例:https://jqueryui.com/dialog/#modal-confirmation(我需要更改的一些东西)。

编辑

现在回调调用一个超链接

相关文章：